Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Menu Responsivo (vanilla)
/*Menu responsivo e efeito de fading*/
.navResponsive {
position: absolute;
top: 0; bottom: 0; left: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 70%;
margin: 0;
background: grey;
box-shadow: 0 0 10px 1000px rgba(0, 0, 0, 0.8);
color: white;
}
.fading {
animation: fade-out .7s ease-out; }
@keyframes fade-out {
from {
opacity: 1; }
to {
opacity: 0; } }
/*Menu responsivo e efeito de fading*/
//menu
let menu = document.querySelector('.navbar-top');
let menuBtn = document.querySelector('.menu-mobile');
//abre o menu clicando no hamburger
menuBtn.addEventListener('click', () => {
menu.classList.add('navResponsive');
});
//fecha o menu clicando fora da janela
document.addEventListener('mouseup', (e) => {
if (document.documentElement.clientWidth <= 768) { //verifica o tamanho da tela
if(e.target != menu && getComputedStyle(menu, null).display == 'flex'){
menu.classList.add('fading');
setTimeout(() => {
menu.classList.remove('fading');
menu.classList.remove('navResponsive');
}, 500);
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment