0

У меня простой код открытия/закрытия меню. Подскажите как можно сделать чтобы закрытие происходило еще и при клике вне меню?

let menuBtn = document.querySelector('.header__burger');
let menu = document.querySelector('.header__nav');
menuBtn.addEventListener('click', function(){
    menu.classList.toggle('menu__active');
});

0

1 ответ 1

0

Есть несколько вариантов, как можно реализовать скрытие меню по нажатию за ее пределы, разной степени костыльности:

  • При открытии меню, добавить в документ блок на весь экран, который будет перекрывать основной контент и закрывать меню по клику на этот блок.
  • Повесить слушатель клика на глобальный объект window, с колбэком, где будет провераться, содержится ли цель клика(event.target) в контейнере меню. Если не содержится, скрываем меню.

Первый вариант вроде не сложный, оставлю этот вариант без кода.

Реализация второго варианта:

const menuBtn = document.querySelector('.header__burger');
const menu = document.querySelector('.header__nav');

const hideMenu = (event) => {
  menu.classList.remove('menu__active');
}

const close = (event) => !menu.contains(event.target) && hideMenu(event);

menuBtn.addEventListener('click', (event) => {
  event.stopPropagation();
  menu.classList.toggle('menu__active');
});

window.addEventListener('click', close);

Наверняка есть еще варианты, но мне в голову пришли только эти два.

3
  • Хотел спросить можно ли запретить скролл когда меню открыта. У меня есть плагин(не мой) модальных окон и там есть данная фишка. Там она реализована так: disableScroll() { let pagePosition = window.scrollY; this.lockPadding(); document.body.classList.add('disable-scroll'); document.body.dataset.position = pagePosition; document.body.style.top = -pagePosition + 'px'; }
    – Kaido
    15 июн 2022 в 11:34
  • Я использую Ваш второй вариант. Но не очень понимаю как можно этот код встроить в Ваш.
    – Kaido
    15 июн 2022 в 11:35
  • @Kaido просто добавьте вашу функцию disableScroll() в обработчик события click элемента menuBtn, a в функцию hideMenu функцию enableScroll(), которая вернет возможность скролла.
    – Neverm1ndo
    15 июн 2022 в 11:48

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.