-1

viva! Estou tendo um problema: tenho um javascript rodando em todas as páginas e quero mantê-lo ativo mesmo se você mudar de página dentro do site (não atualizar), mas o problema é que eu tenho um menu-toggle e toda vez que eu mudo a página, o script começa novamente. então mudei o meu HTML do meu menu e adicionei um atributo ao link rel="history".

Depois de fazer isso, o script funciona sem interrupções como eu queria! mas sempre que clico no link do menu para mudar de pagina, esse mesmo menu continua aberto... Alguém pode me ajudar? muito obrigado

<a class="toggle-menu">
   <i></i>
    <i></i>
    <i></i>
  </a>

<div class="menu-drawer">
    <ul>
      <li><a href="main" rel="history">main</a></li>
        <li><a href="press" rel="history">Press</a></li>
        <li><a href="contacts" rel="history">Contacts</a></li>
    </ul>
  </div>
.toggle-menu {
  width: 50px;
  height: 60px;
  position: relative;
  top: 4px;
  left:7px;
  float: left;
  z-index: 998;
}

.toggle-menu i {
  position: absolute;
  display: block;
  height: 4px;
  background: black;
  width: 50px;
  left: 4px;
  -webkit-transition: all .3s;
  transition: all .3s;
-ms-transition: all .3s; /* IE 9 */
-moz-transition: all .3s; /* Firefox */
-o-transition: all .3s;
}

.toggle-menu i:nth-child(1) {
  top: 16px;
}

.toggle-menu i:nth-child(2) {
  top: 27px;
}

.toggle-menu i:nth-child(3) {
  top: 38px;
}

.toggle-menu.active i:nth-child(1) {
  top: 25px;
  transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg); /* IE 9 */
-moz-transform: rotateZ(45deg); /* Firefox */
-webkit-transform: rotateZ(45deg); /* Safari and Chrome */
-o-transform: rotateZ(45deg);
}

.toggle-menu.active i:nth-child(2) {
  background: transparent;
}

.toggle-menu.active i:nth-child(3) {
  top: 25px;
  transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg); /* IE 9 */
-mozkit-transform: rotateZ(-45deg); /* Firefox */
-webkit-transform: rotateZ(-45deg); /* Safari and Chrome */
-o-transform: rotateZ(-45deg);
}



.menu-drawer {
  width: 100vw;
background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(17px);
-ms-backdrop-filter: blur(17px); /* IE 9 */
-mozkit-backdrop-filter: blur(17px); /* Firefox */
-webkit-backdrop-filter: blur(17px); /* Safari and Chrome */
-o-backdrop-filter: blur(17px);
    
  height: 1500px;
  position: absolute;
  left: -1700px;
  top: 0;
  transition: right linear .2s;
  padding-top: 140px;
  text-transform: uppercase;
}

.open {
  left: 0px;
  transition: left linear .2s;
  -ms-transition: left linear .2s; /* IE 9 */
-moz-transition: left linear .2s; /* Firefox */
-webkit-transition: left linear .2s; /* Safari and Chrome */
-o-transition: left linear .2s;
  
  

}

.menu-drawer li {

    font-size: 4rem;
    font-family: "Helvetica Neue", Helvetica, sans-serif, "Helvetica Neue Regular", Icons;
    font-style: normal;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -1.5px;
    text-align: left;

     }
     
    .menu-drawer li a {
      text-decoration: none;
      color: black;
       }
       
       
      .menu-drawer li a:hover {
        background-color: #000000;
filter: blur(16px);
  -webkit-filter: blur(16px);
     
  
  }
$(function() {
  $(".toggle-menu").click(function() {
    $(this).toggleClass("active");
    $('.menu-drawer').toggleClass("open");
  });
});
2
  • Cadê o CSS das classes? Aliás, por que tá usando uma âncora (<a>) para esse papel? Não é este o dever dela. 20/12/2022 às 16:08
  • @CypherPotato ja atualizei com CSS !
    – didi
    20/12/2022 às 22:09

1 Resposta 1

-1

Para resolver o problema do menu que permanece aberto ao mudar de página, você pode adicionar um listener de evento no seu código JavaScript para o clique no botão de menu e, ao clicar, alterar a classe do elemento que contém o menu. Algo assim:

const toggleMenuButton = document.querySelector('.toggle-menu');
const menuDrawer = document.querySelector('.menu-drawer');

toggleMenuButton.addEventListener('click', function() {
  menuDrawer.classList.toggle('open');
});

Isso vai fazer com que, ao clicar no botão de menu, a classe "open" seja adicionada ou removida do elemento do menu. Você pode então usar essa classe para controlar a exibição do menu com as regras de estilo CSS que você já possui.

Além disso, você também pode adicionar um listener de evento para o evento "popstate" em window. Esse evento é disparado quando o usuário navega para trás ou para a frente na história do navegador. Dessa forma, você pode remover a classe "open" do menu sempre que o usuário navegar para trás ou para a frente na história do navegador:

window.addEventListener('popstate', function() {
  menuDrawer.classList.remove('open');
});

Espero que isso ajude!

3
  • ola boa tarde. peço desculpa mas nao entendi correto! acrescento esse ao meu codigo inicial, certo?
    – didi
    20/12/2022 às 22:06
  • Didi, após sua edição, vou editar a minha resposta para um método mais simples.
    – Antonioli
    20/12/2022 às 22:22
  • me desculpe mas nao funciona... sera que tem email e posso partilhar contigo uma pre visualização? ou outro meio contacto? obrigado
    – didi
    20/12/2022 às 22:36

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 .