Закрыть бургер меню по нажатию на ссылку
Имеется макет, где шапка состоит из ссылок, которые ведут к разным частям страницы по якорям(+анимация через js), проблема в том, что я не могу написать js код, который бы корректно закрывал это меню, и перемещение производилось бы корректно.
HTML:
<header class="header">
<div class="container">
<div class="menu">
<nav class="menu__body">
<ul class="menu__list">
<li>
<a href="" class="menu__item">Home</a>
</li>
<li>
<a href="#about" class="menu__item">About me</a>
</li>
<li>
<a href="#skills" class="menu__item">Skills</a>
</li>
<li>
<a href="#port" class="menu__item">Portfolio</a>
</li>
<li>
<a href="#contacts" class="menu__item">Contacts</a>
</li>
</ul>
</nav>
<div class="menu__burger"><span></span></div>
</div>
</div>
</header>
JS:
const burger = document.querySelector('.menu__burger');
const menu = document.querySelector('.menu__list');
const link = document.querySelector('.menu__item')
if (burger) {
burger.addEventListener("click", function(e) {
document.body.classList.toggle('lock');
burger.classList.toggle('active');
menu.classList.toggle('active');
});
}
if (link) {
link.addEventListener('click', function(e) {
document.body.classList.remove('lock');
menu.classList.remove('active');
burger.classList.remove('active');
});
}
const anchors = document.querySelectorAll("a[href*='#']")
for (let anchor of anchors) {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const blockID = anchor.getAttribute('href')
document.querySelector(' ' + blockID).scrollIntoView({
behavior: "smooth",
block: 'start'
})
})
}