Задать вопрос

DmitriyLeo

Комментарии

  • Как правильно сделать мобильную версию?

    @DmitriyLeo Автор вопроса
    Решил сам, возможно костыль, но результат который был нужен)
    btnMenu = document.querySelector('.header__menu-open');
            var menu =document.querySelector('.header__content');
            var body =document.querySelector('body');
            var btMenu = document.querySelector('.header__nav-list');
            
            var clickHandler = function clickHandler() {
              menu.classList.toggle('active');
              btnMenu.classList.toggle('active');
              };
              btnMenu.addEventListener('click', clickHandler); 
              btMenu.addEventListener('click', clickHandler);
    Написано

  • Как правильно сделать мобильную версию?

    @DmitriyLeo Автор вопроса
    Ankhena, у меня такая же система. К меню добавляется класс active и открывается мобильное. При нажатии на закрытие удаляется класс active. Так суть вопроса такая, чтобы при наличии класса актив при клике на ссылки меню он убирался из блоков с классами .header__content и .header__menu-open

    Полный скрипт примера 
    $('#OpenMobMenu').click(function() {
    $('body').toggleClass('active-menu');
    $(this).toggleClass('active');
    $('header .navigation').toggleClass('active');
});

$('header .nav-list ul a').click(function() {
    $('body').removeClass('active-menu');
    $(this).removeClass('active');
    $('header .navigation').removeClass('active');
    $('#OpenMobMenu').removeClass('active');
});


    <body>
<header>
    <div class="container">
        <div class="header-container">
            <div class="button-open">
                <button id="OpenMobMenu">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
            </div>
            <div class="logo">
                <img src="image/logo.svg" alt="">
            </div>
            <div class="navigation">
                <nav class="nav-list">
                    <ul>
                        <li><a href="#about">О компании</a></li>
                        <li><a href="#products">Продукты</a></li>
                        <li><a href="#buy">Где купить</a></li>
                        <li><a href="#services">Сервисы</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</header>
    Написано

  • Как правильно сделать мобильную версию?

    @DmitriyLeo Автор вопроса
    Ankhena,

    Натыкался на такое решение 
    $('header .nav-list ul a').click(function() {
    $('body').removeClass('active-menu');
    $(this).removeClass('active');
    $('header .navigation').removeClass('active');
    $('#OpenMobMenu').removeClass('active');
});


    Но как его к своему скрипту на открытие и закрытие по кнопке присобачить - не могу понять..
    Написано

  • Как правильно сделать мобильную версию?

    @DmitriyLeo Автор вопроса
    Ankhena, так как это может сработать и на пк версии. Или я ошибаюсь?
    Честно не понимаю алгоритм. Если скрипт выключает действия у всех ссылок, то допустим кнопка открывающая модальное окно - тоже вырубится?
    Написано

  • Как правильно сделать мобильную версию?

    @DmitriyLeo Автор вопроса
    Ankhena, нельзя ссылкам убирать действия. нужно какой-то обработчик клика по ссылкам в определенном блоке, чтобы он закрывал блок как и клик по бургеру(крестику). В коде выставлял 
    btnMenu = document.querySelector('.header__menu-open');
            var menu = document.querySelector('.header__content');
            var body = document.querySelector('body');

            var clickHandler = function clickHandler() {
              menu.classList.toggle('active');
              btnMenu.classList.toggle('active');
              };
              btn.addEventListener('click', clickHandler);

    - вот так открывает и закрывает по бургеру и крестику (блок с классом "header__menu-open")

    а если делаешь так 
    btnMenu = document.querySelector('.header__menu-open');
            var menu = document.querySelector('.header__content');
            var body = document.querySelector('body');

            var clickHandler = function clickHandler() {
              menu.classList.toggle('active');
              btnMenu.classList.toggle('active');
              };
              body.addEventListener('click', clickHandler);

    То при клике в любом месте открывает и закрывает мобильное меню. (при соответствующем разрешении).

    Задача у меня стоит чтобы меню открывалось и закрывалось при клике на блок открытия закрытия (класс блока header__menu-open), и при ссылках в блоке header__content но обязательно если есть второй класс в этом блоке active.

    Уже четвертый день бьюсь и никак не могу сделать.

    Заранее спасибо если покажете примером.
    Написано

  • Как правильно сделать мобильную версию?

    @DmitriyLeo Автор вопроса
    ThunderCat, Добрый день. https://codepen.io/leonovnn/pen/JjZMNNr - вот здесь можно посмотреть
    Написано

  • Как правильно сделать мобильную версию?

    @DmitriyLeo Автор вопроса
    User 4550, Добрый день. https://codepen.io/leonovnn/pen/JjZMNNr Буду благодарен за помощь) Единственное не забыть экран под разрешение шириной 500-800 чтобы было. Через панель разработчика можно адаптировать под какое либо устройство мобильное.
    Написано

  • Как правильно сделать мобильную версию?

    @DmitriyLeo Автор вопроса
    Мобильная версия меню, не закрывается при клике на ссылку анкор. Только на предусмотренный блок открытия закрытия работает.
    Написано