Morphing menú de hamburguesa a pantalla completa con HTML puro/CSS

Vista prévia

Descripción

Una navegación lateral HTML/CSS pura que transforma el botón de alternancia de hamburguesa en un menú de NAV a pantalla completa usando transiciones y transformaciones CSS3.

Funcionamiento

Envuelva los elementos de menú y el botón de alternancia en un elemento Label como este:

<label>

<input type="checkbox">

<span class="menu">


<span class="hamburger"></span>

</span>

<ul>


<li>



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


</li>


<li>



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


</li>


<li>



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


</li>

</ul>
</label>

Estilo de la palanca de menú hamburguesa.

label .hamburger {

position: absolute;

top: 135px;

left: 50px;

width: 30px;

height: 2px;

background: #000;

display: block;

-webkit-transform-origin: center;

transform-origin: center;

-webkit-transition: .5s ease-in-out;

transition: .5s ease-in-out;
}

label .hamburger:after, label .hamburger:before {

-webkit-transition: .5s ease-in-out;

transition: .5s ease-in-out;

content: "";

position: absolute;

display: block;

width: 100%;

height: 100%;

background: #000;
}

label .hamburger:before { top: -10px; }

label .hamburger:after { bottom: -10px; }

label input { display: none; }

label input:checked + .menu {

box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF;

border-radius: 0;
}

label input:checked + .menu .hamburger {

-webkit-transform: rotate(45deg);

transform: rotate(45deg);
}

label input:checked + .menu .hamburger:after {

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

bottom: 0;
}

label input:checked + .menu .hamburger:before {

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

top: 0;
}

label input:checked + .menu + ul { opacity: 1; }

Estilo del menú de navegación a pantalla completa.

label .menu {

position: absolute;

right: -100px;

top: -100px;

z-index: 100;

width: 200px;

height: 200px;

background: #FFF;

border-radius: 50% 50% 50% 50%;

-webkit-transition: .5s ease-in-out;

transition: .5s ease-in-out;

box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;

cursor: pointer;
}

label ul {

z-index: 200;

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

opacity: 0;

-webkit-transition: .25s 0s ease-in-out;

transition: .25s 0s ease-in-out;
}

label a {

margin-bottom: 1em;

display: block;

color: #000;

text-decoration: none;
}