0

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.

2
  • Cara seria interessante vc editar a sua pergunta e incluir o mínimo de código que de para pelo menos simular o seu problema, só com esse pedaços que vc colocou nem o menu está funcionando
    – hugocsl
    Commented 6/01/2021 às 9:49
  • Eu criaria uma função closeMenuToogle(), pode-se chamar a mesma através de um evento de click em qualquer ancora da pagina. Toda a vez que for clicada em um link de navegação, a função é chamada. Commented 6/01/2021 às 22:44

1 Resposta 1

1

O ultimo if verifica se o alvo do click foi uma 'ancora' e se não é pra mostrar, então seta a propriedade display do style como 'none'.

const menu = document.querySelector(".menu-toggle");
let show = true;

menu.addEventListener("click", (event) => {
    event.stopPropagation();
    
    //Oque já faz hoje
    show = !show;
    
    if(event.target.tagName === 'A' && !show)
      menu.style.display = 'none';
})
.two, .one {
  display: 'block';
  height: 32px;
  width: 32px;
}
<div class="menu-toggle">
  <a href='#' class="two">Link1</a>
  <a href='#' class="one">Link2</a>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .