Закрыть полноэкранное меню при нажатии на ссылку - PullRequest
Новая
       15

Закрыть полноэкранное меню при нажатии на ссылку

0 голосов
/ 13 сентября 2018

Я изучаю JavaScript, и я потратил много времени, пытаясь найти решение этой проблемы. Я бы хотел, чтобы при нажатии на ссылку закрывалось полноэкранное меню. Я не могу на всю жизнь понять, как это сделать. Вот мой JavaScript: 

// Select DOM Items
const menuBtn = document.querySelector(".menu-btn");
const menu = document.querySelector(".menu");
const menuNav = document.querySelector(".menu-nav");
const menuBranding = document.querySelector(".menu-branding");
const navItems = document.querySelectorAll(".nav-item");

// Set Initial State Of Menu
let showMenu = false;

menuBtn.addEventListener("click", toggleMenu);

function toggleMenu() {
  if (!showMenu) {
    menuBtn.classList.add("close");
    menu.classList.add("show");
    menuNav.classList.add("show");
    menuBranding.classList.add("show");
    navItems.forEach(item => item.classList.add("show"));

    // Set Menu State
    showMenu = true;
  } else {
    menuBtn.classList.remove("close");
    menu.classList.remove("show");
    menuNav.classList.remove("show");
    menuBranding.classList.remove("show");
    navItems.forEach(item => item.classList.remove("show"));

    // Set Menu State
    showMenu = false;
  }
}

1 Ответ

0 голосов
/ 13 сентября 2018

Ну, тебе не нужно делать все это. Просто создайте еще один оверлейный div и добавьте ссылки внутри него и сделайте так, чтобы он отображался как none. 

.overlay{
position: fixed; 
display: none;
width: 100%; 
height: 100%; 
top: 0; 
left: 0;
right: 0;
bottom: 0;
z-index: 2;
background: #333;
}

И добавьте прослушиватель событий в теги ссылок и сделайте так, чтобы наложение не отображало ничего, и все.

...