El menú de navegación desplegable CSS puro

Vista prévia

Descripción

Un sistema de navegación HTML/CSS que utiliza : checked selector para alternar un menú fuera de la pantalla con un botón de hamburguesa.

Funcionamiento

Crear una casilla de verificación falsa/oculta que se utiliza como clic reciever, por lo que puede utilizar el: selector activado en él.

<input type="checkbox">

Crea tres tramos para el botón de hamburguesa.

<span></span>
<span></span>
<span></span>

Cree el menú de navegación.

<ul id="menu">

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

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

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

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

Toda la estructura HTML debe ser así:

<nav>

<div id="menuToggle">


<input type="checkbox">


<span></span>


<span></span>


<span></span>


<ul id="menu">



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



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



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



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


</ul>

</div>
</nav>

Las reglas CSS/CSS3 para el botón de hamburguesa.

#menuToggle {

display: block;

position: relative;

top: 50px;

left: 50px;

z-index: 1;

-webkit-user-select: none;

user-select: none;
}

#menuToggle input {

display: block;

width: 33px;

height: 28px;

position: absolute;

top: 0;

left: 0;

cursor: pointer;

opacity: 0; /* hide this */

z-index: 2; /* and place it over the hamburger */
}

/*
 * Just a quick hamburger
 */

#menuToggle span {

display: block;

width: 33px;

height: 4px;

margin-bottom: 5px;

position: relative;

background: #cdcdcd;

border-radius: 3px;

z-index: 1;

transform-origin: 4px 0px;

transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
opacity 0.55s ease;
}

#menuToggle span:first-child { transform-origin: 0% 0%; }

#menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; }

/*

* Transform all the slices of hamburger
 * into a crossmark.
 */

#menuToggle input:checked ~ span {

opacity: 1;

transform: rotate(45deg) translate(-2px, -1px);

background: #232323;
}

/*
 * But let's hide the middle one.
 */

#menuToggle input:checked ~ span:nth-last-child(3) {

opacity: 0;

transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */

#menuToggle input:checked ~ span:nth-last-child(2) {

opacity: 1;

transform: rotate(-45deg) translate(0, -1px);
}

Los estilos CSS primarios para el menú de navegación.

/*
 * Make this absolute positioned
 * at the top left of the screen
 */

#menu {

position: absolute;

width: 300px;

margin: -100px 0 0 -50px;

padding: 50px;

padding-top: 125px;

background: #ededed;

list-style-type: none;

transform-origin: 0% 0%;

transform: translate(-100%, 0);

transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#menu li {

padding: 10px 0;

font-size: 22px;
}

/*
 * And let's fade it in from the left
 */

#menuToggle input:checked ~ ul {

transform: scale(1.0, 1.0);

opacity: 1;
}