Menú de hamburguesa de pantalla completa CSS/CSS3 puro

Vista prévia

Descripción

Este es un menú de navegación de pantalla completa responsivo con un conmutador de hamburguesa basado en SVG, construido usando puro HTML5/CSS3.

Funcionamiento

Crear una hamburguesa alternar para alternar el menú de pantalla completa utilizando SVG y casilla de verificación/etiqueta.

<input id="toggle" type="checkbox" />
<label for="toggle">


<svg class="burger" width="86" height="60" viewbox="0 0 150 150">




<g stroke-width="12">







 <line x1="6" y1="6" x2="80" y2="6"></line>






<line x1="6" y1="28" x2="80" y2="28"></line>






<line x1="6" y1="50" x2="80" y2="50"> </line>




</g>


</svg>


<svg class="close" width="86" height="60" viewbox="0 0 150 150">




<g stroke-width="12">







 <line x1="42" y1="6" x2="42" y2="80"></line>






<line x1="6" y1="42" x2="80" y2="42"></line>




</g>


</svg>
</label>

Cree el menú como sigue:

<div class="menu">

<div>Home</div>

<div>About</div>

<div>Blog</div>

<div>Contact</div>
</div>

El núcleo CSS/CSS3 para el menú de alternar y cerrar botón.

label {

position: absolute;

z-index: 1;
}

input {

display: none;
}

input:checked ~ label {

right: 0;
}

.burger {

position: relative;

top: 24px;

cursor: pointer;
}

.burger g {

stroke: #ffffff;

-webkit-transition: stroke 0.25s ease-in-out;

transition: stroke 0.25s ease-in-out;
}

.burger g:hover {

stroke: #cccccc;
}

input:checked ~ label .burger {

opacity: 0;
}

.close {

position: relative;

top: 24px;

cursor: pointer;

opacity: 0;
}

.close g:hover {

stroke: #cccccc;
}

.close g {

stroke: #ffffff;

-webkit-transition: stroke 0.25s ease-in-out;

transition: stroke 0.25s ease-in-out;
}

.close line {

-webkit-transform-origin: 0%;





transform-origin: 0%;
}

.close g {

-webkit-transform: rotateZ(45deg);





transform: rotateZ(45deg);

-webkit-transform-origin: 50%;





transform-origin: 50%;
}

input:checked ~ label .close {

opacity: 1;
}

input:checked ~ .menu {

opacity: 1;
}

input:checked ~ .menu div {

margin-top: 0px;
}

Estilo del menú lo que quieras:

.menu {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;



-ms-flex-direction: column;





flex-direction: column;

-webkit-box-align: center;

-webkit-align-items: center;



-ms-flex-align: center;





align-items: center;

-webkit-justify-content: space-around;



-ms-flex-pack: distribute;





justify-content: space-around;

position: absolute;

opacity: 0;

width: 100vw;

height: 100vh;

background-color: tomato;

-webkit-transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);

transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);

color: #ffffff;

text-transform: uppercase;

font-size: 24px;

font-weight: bold;

font-family: Arial, Helvetica, sans-serif;
}

.menu div {

margin-top: 50px;

-webkit-transition: margin 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);

transition: margin 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}