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).