Olá, boa tarde!
O botão "Abre Menu" não está funcionando...
Poderiam me ajudar por favor?
Segue meus códigos abaixo:
menu.js
document.querySelector('.menu-abrir').onclick = function() {
document.documentElement.classList.add('menu-ativo');
};
document.querySelector('.menu-fechar').onclick = function() {
document.documentElement.classList.remove('menu-ativo');
};
document.documentElement.onclick = function(event) {
if (event.target === document.documentElement) {
document.documentElement.classList.remove('menu-ativo');
}
};CSS:
@media(max-width: 600px){
.nav-principal {
background: #f0f0f0;
padding: 1em;
margin: 0;
height: 100%;
width: 90%;
max-width: 320px;
position: fixed;
z-index: 1;
top: 0;
left: -90%;
transition: left 0.3s ease-out;
}
.menu-ativo .nav-principal {
left: 0;
}
.menu-principal li {
padding: 1em 0;
width: 100%;
}
}
@media not all and (max-width: 600px) {
.menu-abrir,
.menu-fechar {
display: none;
}
}
@media (max-width: 600px) {
.menu-ativo:after {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,0.4);
}
}No HTML, inseri a tag script dentro da tag head:
<script src="menu.js"></script>e coloquei os botões:
Desde já obrigada e fico no aguardo! =) Bruna
