Navegación de hamburguesa a pantalla completa con JavaScript y CSS

Vista prévia

Descripción

Una navegación basada en JavaScript y CSS/CSS3 de vainilla le ayuda a crear un menú adaptable para dispositivos móviles, pantalla completa y responsive con un botón de alternancia de hamburguesas. Animado con las transiciones y transformaciones CSS3.

Funcionamiento

Crea el HTML para el botón de alternar hamburguesa.

<header>

<nav class="menu">


 <div class="strokes"></div>


 <div class="strokes"></div>


 <div class="strokes"></div>

</nav>
</header>

Cree el menú de navegación.

<div class="fullscreenmenu">

<ul>




<li>





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



</li>




<li>





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



</li>




<li>





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



</li>

</ul>
</div>

Los estilos CSS/CSS3 requeridos.

nav.menu {

width: 42px;

height: 36px;

float: right;

margin: 30px 30px 0 0;

position: relative;

z-index: 999;

cursor: pointer;
}

nav.menu div.strokes {

width: 100%;

height: 6px;

margin: 0 0 6px 0;

background: white;

transition: transform 0.3s, opacity 0.1s;
}

.hide {

opacity: 0;

transform: translateX(-42px);
}

.animate0 { transform: rotate(45deg) translateY(17px); }

.animate2 { transform: rotate(-45deg) translateY(-17px); }

.fullscreenmenu {

background-color: rgba(52, 152, 219, 0);

top: 0;

left: 0;

width: 100%;

height: 100%;

position: absolute;

opacity: 0;

-webkit-transition: background 0.5s ease-in-out, opacity 0.5s;

-moz-transition: background 0.5s ease-in-out, opacity 0.5s;

-ms-transition: background 0.5s ease-in-out, opacity 0.5s;

-o-transition: background 0.5s ease-in-out, opacity 0.5s;

transition: background 0.5s ease-in-out, opacity 0.5s;

text-align: center
}

.fullscreenmenu.show {

opacity: 1;

background-color: rgba(52, 152, 219, 0.9);

-webkit-transition: background 0.5s ease-in-out, visibility 0.5s;

-moz-transition: background 0.5s ease-in-out, visibility 0.5s;

-ms-transition: background 0.5s ease-in-out, visibility 0.5s;

-o-transition: background 0.5s ease-in-out, visibility 0.5s;

transition: background 0.5s ease-in-out, visibility 0.5s;
}

.fullscreenmenu ul { padding: 10%; }

.fullscreenmenu li a {

visibility: inherit;

color: white;

font-family: 'Source Sans Pro', sans-serif;

font-size: 70px;

text-decoration: none;

font-weight: 100;

text-transform: uppercase;

line-height: 150%;
}

El JavaScript para activar la hamburguesa de pantalla completa de navegación.

(function () {

"use strict";





var fullscreenmenu = document.querySelector(".fullscreenmenu");





var strokes = document.querySelectorAll(".strokes"),




icon = document.querySelector(".menu"),




fullscreenmenu = document.querySelector(".fullscreenmenu");




function transformStart() {





strokes[0].classList.toggle("animate0")




strokes[1].classList.toggle("hide");




strokes[2].classList.toggle("animate2");




fullscreenmenu.classList.toggle("show");



}





icon.addEventListener("click", transformStart);

})();