Доброе утро, всем!
Написал скрипт для адаптивного меню, но получается так, что класс добавляется для анимированного открытия, но после клика на крестик, меню не закрывается(не удаляется класс)....
Можете объяснить как правильно сделать?
const burgerMenu = () => {
const menu = document.querySelector('.burger'),
menuNav = document.querySelector('.nav-list'),
body = document.querySelector('body');
body.addEventListener('click', (event) => {
let target = event.target;
if (target.closest('.burger')) {
menu.classList.add('burger-open');
menuNav.style.display = 'block';
} else if (target.classList.contains('burger')) {
menu.classList.remove('burger-open');
menuNav.style.display = 'none';
} else if (target.tagName !== 'DIV') {
menu.classList.remove('burger-open');
menuNav.style.display = 'none';
} else {
return;
}
});
};
burgerMenu();
.burger {
display: block;
}
.burger-top__line, .burger-center__line, .burger-bottom__line {
width: 100%;
height: 2px;
border-radius: 15px;
background-color: #ffffff;
position: absolute;
-webkit-transition: .4s;
-o-transition: .4s;
transition: .4s;
}
.burger-top__line {
top: 6px;
}
.burger-center__line {
top: 14px;
}
.burger-bottom__line {
top: 22px;
}
<div class="header-links">
<div class="burger">
<div class="burger-top__line"></div>
<div class="burger-center__line"></div>
<div class="burger-bottom__line"></div>
</div>
<nav class="nav">
<ul class="nav-list">
<li class="nav-list__item">
<a href="#main" class="nav-list__link">Главная</a>
</li>
<li class="nav-list__item">
<a href="#portfolio" class="nav-list__link">портфолио</a>
</li>
<li class="nav-list__item">
<a href="#about" class="nav-list__link">о нас</a>
</li>
<li class="nav-list__item">
<a href="#advantages" class="nav-list__link">преимущества</a>
</li>
<li class="nav-list__item">
<a href="#contacts" class="nav-list__link">контакты</a>
</li>
</ul>
</nav>
</div>
Спасибо!
