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

Question

[DmitriyLeo]

Здравствуйте, Проблема с меню возникла, гуглил кучу вариантов только ломаю скрипт.
Есть сайт, есть мобильная версия. На меню мобильной версии при переходе по ссылке(ведущей на анкор), мобильная версия не закрывается. Только на блок открытия закрытия мобильного меню.

Просьба помочь разобраться.

<header class="header header--home">
  <div class="header__wrapper">
    <a href="/" class="header__logo">
      <img loading="lazy" src="/assets/img/svg/logo.png">
      
    </a>

    <div class="header__content">
      <nav class="header__nav">
    
<ul class="header__nav-list">
     <li class="header__nav-item"><a class="header__nav-link" href="#neispravnost">Неисправности</a></li>
    <li class="header__nav-item"><a class="header__nav-link" href="#usloviarabot">Условия работы</a></li>
    <li class="header__nav-item"><a class="header__nav-link" href="#stepworks">Этапы</a></li>
  </ul>

        
      </nav>
      <div class="header__info">
    <a class="header__tel" href="tel:[phone]">[phone]</a>
    <a class="home-first__link btn is-phone" data-remodal-target="secondModal" data-title1="Заявка" data-title2="с кнопки меню">Позвоните мне</a>
</div>
    </div>
  
 <span class="header__menu-open" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="true" aria-label="Toggle navigation">
<span></span>
</span>

  </div>

</header>

скрипт

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.classList.toggle('scroll-lock');
              };
              body.addEventListener('click', clickHandler);

Заранее спасибо огромное за подсказки и направления. javascript не знаю, на обучение пойду только в январе. А вопрос надо этот решить уже сейчас.

Comments

[ThunderCat]

мобильная версия не закрывается.

Эээ... что не закрывается? Что за мобильная версия?

[DmitriyLeo]

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

[Человек]

DmitriyLeo, а можно полный код оформить в codepen или других подобных песочницах.
чтобы я мог лично посмотреть на проблему.

И что за ссылка анкор?
Назовите конкретный класс данной ссылки.

[Ankhena]

DmitriyLeo, ссылкам можно убрать действие по умолчанию https://developer.mozilla.org/en-US/docs/Web/API/E... и потом сотворить функцию с двумя действиями: закрыть меню и перейти по ссылке.

[DmitriyLeo]

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

[DmitriyLeo]

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

[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.

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

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

[Ankhena]

DmitriyLeo,

нельзя ссылкам убирать действия

По какой причине?

[DmitriyLeo]

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

[DmitriyLeo]

Ankhena,

Натыкался на такое решение

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

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

[Ankhena]

DmitriyLeo,

так как это может сработать и на пк версии. Или я ошибаюсь?

Если не напишете условие, то, конечно, будет.
Но вы же напишете..

Если скрипт выключает действия у всех ссылок, то допустим кнопка открывающая модальное окно - тоже вырубится?

Вообще, ссылки и кнопки это разные элементы и, наверное, у них разные классы.
И у кнопки с типом button по умолчанию вообще нет никаких действий, там нечего вырубать.
Вы же можете написать селектор так, чтобы выбрались только нужные элементы.

Натыкался на такое решение

Знать бы, какое это имеет отношение к вашей проблеме...
Этот скрипт меняет классы у body, тыкнутого элемента, навигации и ещё какой-то странно сделанной навигации (видимо, в коде дублируется меню для мобилок и десктопов).

Вам нужно при клике на ссылку убрать её действие по умолчанию и добавить две функции.
На переход по указанному в href урлу.
На закрытие меню.

https://yandex.ru/search/?clid=9582&text=javascrip...

[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>

[Ankhena]

DmitriyLeo, забыла уже, что там в jq,
hasClass или типа того.

Но, по-моему, вам нужно не проверять, а при клике добавлять active ссылке и всё остальное.

Или вы в localStorage записываете активную ссылку?
С другой стороны, даже если записываете, то меню в начале всё равно же закрыто, так что я не поняла смысла в проверке есть active или нет.

[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);