5

Não estou conseguindo fazer funcionar, eu tenho um menu lateral retratil e um botão em uma barra no cabeçalho. Eu setei meu menu para margin-left: -250px; e queria que quando eu apertasse o botão ele setasse para margin-left: 0;, fazendo assim o menu aparecer novamente.

CSS do menu:

#menu-lateral {
    width: 250px;
    height: 100%;
    margin-left: -250px;
}

HTML do botão:

<div class="btn-header">
      <a href="" id="btn-menu">
      <img src="img/menu.png">
      <img src="img/icone.png">
      <p>Home</p></a>
</div> 

JavaScript que eu fiz:

    var clique = document.getElementById("btn-menu"); 
    var menuLateral = document.getElementById("menu-lateral");

    clique.onclick = function(){
        document.menuLateral.style.marginLeft = "0";
    };

Meu objetivo é:

Ao clicar no botão mudar em #menu-lateral o margin-left: -250px; para margin-left: 0; e que quando o menu estiver aberto, se clicar novamente ele fecha(setando o margin-left: -250px; novamente).

1 Resposta 1

12

Tens de mudar duas coisas:

Primeiro deves usar e.preventDefault(); para impedir que o link recarregue a página, ou juntar # no href.

Segundo tu declaras uma variável que aponta para o menu, var menuLateral = document.getElementById("menu-lateral");. Mais à frente no código em vez de usar a variável usas document.menuLateral.style... quando devias usar somente menuLateral.style...

Corrigido fica assim:

clique.onclick = function (e) {
    e.preventDefault();
    menuLateral.style.marginLeft = "0";
};

Exemplo (com CSS transition também): http://jsfiddle.net/zjevj1vv/

Podes fazer isso também via classe de CSS, nesse caso aplicas o estilo novo via CSS que é melhor. Um exemplo de como fazer toggle seria:

CSS

.toggleMenu {
    margin-left: 0px !important;
}

JavaScript

clique.onclick = function (e) {
    e.preventDefault();
    menuLateral.classList.toggle('toggleMenu');
};

O toggle adiciona uma classe e/ou remove se ela já existir. É como o botão do comando da televisão, carrega para ligar/desligar.
O !important é para dizer que quando essa classe for adicionada então essa regra sobrepõe-se à outra de margin-left: -250px;.
O transition, diz que a mudança deve ser por animação e com duração de 0.7 segundos

jsFiddle: http://jsfiddle.net/zjevj1vv/1/

9
  • 1
    @AndreyHartung nesse caso podes fazer assim, usando uma classe de CSS: jsfiddle.net/zjevj1vv/1
    – Sergio
    Commented 16/04/2015 às 19:34
  • 1
    Era exatamente isso que eu queria! MUITO Obrigado! Mas me diga, tu poderia me explicar como funciona? Sou novo nesse mundo de programador web :/ ou um lugar para eu ler sobre isso seria ótimo, porque eu não consegui encontrar nada bom. Commented 16/04/2015 às 19:43
  • 1
    @AndreyHartung que parte não percebeste para eu explicar melhor? ou melhor, que parte percebeste?
    – Sergio
    Commented 16/04/2015 às 19:45
  • 1
    @AndreyHartung o toggle adiciona uma classe e remove se ela já existir. É como o botão do comando da televisão, carrega para ligar/desligar. O !important é para dizer que quando essa classe for adicionada então essa regra sobrepõe-se à outra de margin-left -250px. Por fim, o transition, diz que a mudança deve ser por animação e com duração de 0.7 segundos
    – Sergio
    Commented 16/04/2015 às 19:50
  • 1
    @AndreyHartung ele adiciona ou retira ao elemento que menuLateral apontar.
    – Sergio
    Commented 16/04/2015 às 20:01

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 .