Tenho os seguintes codigos:
<div class="menu-toggle">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
@media (max-width: 700px) {
nav {
padding: 20px 30px 0px;
}
nav .navigation {
display: none;
}
.menu-toggle {
display: grid;
justify-items: end;
width: 40px;
height: 30px;
margin-top: -5px;
}
.one, .two, .three {
height: 4px;
width: 80%;
margin-top: 6px;
border-radius: 10px;
background-color: var(--menuToggle);
transition-duration: 300ms;
}
nav.on {
align-items: unset;
padding: 26px 0px 0px 0px;
position: absolute;
top: 0;
left: 1px;
right: 0;
z-index: 1;
width: 100vw;
height: 60vh;
transition-duration: 200ms;
box-shadow: var(--boxShadow);
border-radius: 0px 0px 20px 20px;
background-color: var(--fullScreen);
}
let show = true;
const main = document.querySelector("#main")
const navigation = document.querySelector(".nav")
const menuToggle = navigation.querySelector(".menu-toggle")
menuToggle.addEventListener("click", () => {
main.style.marginTop = show ? "90px" : "0px";
navigation.classList.toggle("on", show)
show = !show;
})
É um menu hamburguer que até funciona bem no sentido de clicar no hamburger pra abrir e clicar no "x" para fechar. Porém, quando clico em algum ítem de navegação (são links âncoras) ele vai até a parte especifica da página, mas, quando subo pro topo de volta, o menu ainda está lá aberto.