Скрытие nav по нажатию на элемент <li> в меню

Рейтинг: 0Ответов: 3Опубликовано: 03.03.2023

Вроде всё должно работать, но нет

// Берём кнопку
let btnMenu = document.querySelector(".btn-menu");
// Берём меню
let ulMenu = document.querySelector(".menu");
let closeMenu = document.querySelector(".closeMenu")
 
// Обработка события нажатия на кнопку
btnMenu.addEventListener("click", function () {
    // Переключаем класс меню
    ulMenu.classList.toggle("show-menu");
    // Переключаем класс кнопки
    btnMenu.classList.toggle("btn-show-menu")
})
closeMenu.addEventListener("click", function(){
   // Переключаем класс меню
   ulMenu.classList.toggle("show-menu");
   // Переключаем класс кнопки
   btnMenu.classList.toggle("btn-show-menu")
})
nav {
        position: absolute;
        font-size: 7vw;
        z-index: 100;
       }
        
       ul {
        position: absolute;
        list-style: none;
        padding: 0;
        width: 600px;
        height: 100vh;
        background-color: green;
        margin-top: 0;
        left: -600px;
        transition: 500ms;
       }
        
       .btn-menu {
        width: 40px;
        height: 40px;
        position: relative;
        background-color: orange;
       }
        
       li {
        padding: 10px 0;
        text-align: center;
       }
        
       li a {
        color: white;
        text-decoration: none;
       }
        
       .show-menu {
        left: 0;
       }
        
       div.btn-show-menu {
        background-color: blue;
       }
}
<nav>
            <ul class="menu">
                <li><a href="#main">Главная</a></li>
                <li><a href="#company">О компании</a></li>
                <li><a href="#services">Услуги</a></li>
                <li><a href="#objects">Объекты</a></li>
                <li><a href="#guarantees">Гарантии</a></li>
                <li><a href="#licenses">Лицензии</a></li>
            <li><a href="#contacts">Связь</a></li>
            </ul>
            <div class="btn-menu"></div>
        </nav>

javascript
Источник: Stack Overflow на русском

Ответы

▲ 0

Мой вариант решения закрытие меню по нажатию на ссылке. Без редактирования html, регистрации и смс:

// Берём кнопку
const btnMenu = document.querySelector("#btn-menu");
// Берём меню
const ulMenu = document.querySelector("#menu");


// Обработка события нажатия на кнопку
btnMenu.addEventListener("click", function() {
  // Переключаем класс меню
  ulMenu.classList.toggle("show-menu");
  // Переключаем класс кнопки
  btnMenu.classList.toggle("btn-show-menu")
})

// Обработка события нажатия в области меню
ulMenu.addEventListener('click', event => {
  // Если нажато на ссылку скрываем меню
  if (event.target.getAttribute('href')) {
    ulMenu.classList.remove("show-menu");
  }
});
nav {
  position: absolute;
  font-size: 7vw;
  z-index: 100;
}

ul {
  position: absolute;
  list-style: none;
  padding: 0;
  width: 600px;
  min-height: 100vh;
  background-color: green;
  margin-top: 0;
  left: -600px;
  transition: 500ms;
}

.btn-menu {
  width: 40px;
  height: 40px;
  position: relative;
  background-color: orange;
}

.btn-menu:hover {
  cursor: pointer;
}

li {
  padding: 10px 0;
  text-align: center;
}

li a {
  color: white;
  text-decoration: none;
}

.show-menu {
  left: 0;
}

div.btn-show-menu {
  background-color: blue;
}
<nav>
  <ul class="menu" id="menu">
    <li><a href="#main">Главная</a></li>
    <li><a href="#company">О компании</a></li>
    <li><a href="#services">Услуги</a></li>
    <li><a href="#objects">Объекты</a></li>
    <li><a href="#guarantees">Гарантии</a></li>
    <li><a href="#licenses">Лицензии</a></li>
    <li><a href="#contacts">Связь</a></li>
  </ul>
  <div class="btn-menu" id="btn-menu"></div>
</nav>

▲ 0

Решилось всё проще чем казалось Возвести все li в отдельный div id="nav-close" в скрипт добавить:

let closeMenu = document.querySelector("#close");
closeMenu.addEventListener("click", function() {
   ulMenu.classList.remove("show-menu");
})

▲ 0

Скрытие nav по нажатию на элемент < li > в меню

Предложу такой вариант...

// Берём кнопку
const btnMenu = document.querySelector("#btn-menu");
// Берём меню
const ulMenu = document.querySelector("#menu");

// Обработка события нажатия на кнопку
ulMenu.addEventListener("click", function(e) {
  const o = e.target.closest('li')
  if (!o) return
  ulMenu.classList.remove("show-menu");
  btnMenu.classList.remove("btn-show-menu")
})
// Обработка события нажатия на кнопку
btnMenu.addEventListener("click", function() {
  // Переключаем класс меню
  ulMenu.classList.toggle("show-menu");
  // Переключаем класс кнопки
  btnMenu.classList.toggle("btn-show-menu")
})
nav {
  position: absolute;
  font-size: 7vw;
  z-index: 100;
}

ul {
  position: absolute;
  list-style: none;
  padding: 0;
  width: 600px;
  min-height: 100vh;
  background-color: green;
  margin-top: 0;
  left: -600px;
  transition: 500ms;
}

.btn-menu {
  width: 40px;
  height: 40px;
  position: relative;
  background-color: orange;
}

.btn-menu:hover {
  cursor: pointer;
}

li {
  padding: 10px 0;
  text-align: center;
}

li a {
  color: white;
  text-decoration: none;
}

.show-menu {
  left: 0;
}

div.btn-show-menu {
  background-color: blue;
}
<nav>
  <ul class="menu" id="menu">
    <li><a href="#main">Главная</a></li>
    <li><a href="#company">О компании</a></li>
    <li><a href="#services">Услуги</a></li>
    <li><a href="#objects">Объекты</a></li>
    <li><a href="#guarantees">Гарантии</a></li>
    <li><a href="#licenses">Лицензии</a></li>
    <li><a href="#contacts">Связь</a></li>
  </ul>
  <div class="btn-menu" id="btn-menu"></div>
</nav>