Fullscreen hamburguesa mega menu con JS y CSS

Vista prévia

Descripción

Un mega menú de hamburguesa con una superposición de pantalla completa animada construida con JavaScript y CSS/CSS3.

Funcionamiento

Crear el mega menú de pantalla completa con un botón de cierre.

<nav id="overlay">

<img src="images/close-button.svg" alt="menu" class="close-button"
id="close-menu">

<ul>



<li>





<a href="#">Home</a>





<span>Watch out, This is my site</span>



</li>




<li>





<a href="#">About Me</a>





<span>Watch out, This is my site</span>



</li>




<li>





<a href="#">Services</a>





<span>Watch out, This is my site</span>



</li>




<li>





<a href="#">Contact</a>





<span>Watch out, This is my site</span>



</li>

</ul>
</nav>

Crea un botón de hamburguesa para alternar el mega menú.

<img src="images/burger-menu.svg" alt="menu" class="menu-btn" id="open-menu">

Estilo del mega menú en el CSS.

nav .close-button {

width: 18px;

float: right;

cursor: pointer;

opacity: 0;
}

nav ul {

list-style-type: none;

margin: 10% auto 0 auto;

padding: 0;

display: -ms-grid;

display: grid;

-ms-grid-columns: (auto)[4];



grid-template-columns: repeat(4, auto);

width: 80%;
}

nav ul a {

color: white;

font-weight: bold;

font-size: 1.4em;
}

nav ul span {

color: gray;

display: block;

font-size: .75em;

margin-top: 20px;
}

nav ul li {

opacity: 0;
}

Las reglas de CSS/CSS3 necesarias para la superposición animada.

.show-menu {

display: block;

-webkit-animation: slide-menu 1s ease-in forwards;





animation: slide-menu 1s ease-in forwards;
}

.show-menu .close-button {

-webkit-animation: show-x 1s 1s forwards;





animation: show-x 1s 1s forwards;
}

.show-menu li:nth-of-type(1) {

-webkit-animation: menu-item-anim .6s forwards 1s ease-in-out;





animation: menu-item-anim .6s forwards 1s ease-in-out;
}

.show-menu li:nth-of-type(2) {

-webkit-animation: menu-item-anim .6s forwards 1.2s ease-in-out;





animation: menu-item-anim .6s forwards 1.2s ease-in-out;
}

.show-menu li:nth-of-type(3) {

-webkit-animation: menu-item-anim .6s forwards 1.6s ease-in-out;





animation: menu-item-anim .6s forwards 1.6s ease-in-out;
}

.show-menu li:nth-of-type(4) {

-webkit-animation: menu-item-anim .6s forwards 1.8s ease-in-out;





animation: menu-item-anim .6s forwards 1.8s ease-in-out;
}

@-webkit-keyframes slide-menu {

from {


-webkit-transform: scaleX(0);






transform: scaleX(0);

}

to {


-webkit-transform: scaleX(1);






transform: scaleX(1);

}
}

@keyframes slide-menu {

from {


-webkit-transform: scaleX(0);






transform: scaleX(0);

}

to {


-webkit-transform: scaleX(1);






transform: scaleX(1);

}
}

@-webkit-keyframes show-x {

from {


opacity: 0;

}

to {


opacity: 1;

}
}

@keyframes show-x {

from {


opacity: 0;

}

to {


opacity: 1;

}
}

@-webkit-keyframes menu-item-anim {

from {


-webkit-transform: translateY(70%);






transform: translateY(70%);


opacity: 0;

}

to {


-webkit-transform: translateY(0);






transform: translateY(0);


opacity: 1;

}
}

@keyframes menu-item-anim {

from {


-webkit-transform: translateY(70%);






transform: translateY(70%);


opacity: 0;

}

to {


-webkit-transform: translateY(0);






transform: translateY(0);


opacity: 1;

}
}

Activa el mega menu activando las clases CSS usando JavaScript.

const overlay = document.getElementById('overlay');
const closeMenu = document.getElementById('close-menu');


document.getElementById('open-menu') .addEventListener('click', function() {


overlay.classList.add('show-menu');
});

document.getElementById('close-menu').addEventListener('click', function(){


overlay.classList.remove('show-menu')
})