<nav class="navigation menu menu-position menu-hidden">
123
</nav>
<button class="btn">
кнопка
</button>
.navigation {
background-color: green;
width: 700px;
height: 70px;
}
.menu-hidden {
display: none;
}
const menu = document.querySelector(".menu");
const toggler = document.querySelector(`.btn`);
if (menu) {
document.addEventListener("click", function (e) {
e.preventDefault();
menu.classList.add("menu-hidden");
});
toggler.addEventListener(`click`, (e) => {
e.preventDefault();
e.stopPropagation(); // остановить всплытие
menu.classList.toggle(`menu-hidden`);
});
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.