Есть несколько вариантов, как можно реализовать скрытие меню по нажатию за ее пределы, разной степени костыльности:
- При открытии меню, добавить в документ блок на весь экран, который будет перекрывать основной контент и закрывать меню по клику на этот блок.
- Повесить слушатель клика на глобальный объект 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);
Наверняка есть еще варианты, но мне в голову пришли только эти два.