Crear un menú de cajón de estilo de aplicación con CSS puro/CSS3

Vista prévia

Descripción

Una navegación de estilo de aplicación móvil Cool que revela un menú fuera de lienzo familiar y empuja el contenido principal a la derecha. Escrito con CSS/CSS3 puro.

Funcionamiento

Cree un campo de entrada con una etiqueta para el botón de alternancia.

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

Cree un menú de cajón a partir de < lista de > NAV.

<nav id="drawer">

<ul>


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


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


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


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


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

</ul>
</nav>

El CSS necesario para el botón de alternancia.

#drawer-toggle-label:before {

content: "";

display: block;

position: absolute;

height: 2px;

width: 24px;

background: #fff;

left: 13px;

top: 18px;

box-shadow: 0 6px 0 #fff, 0 12px 0 #fff;
}

#drawer-toggle-label {

display: block;

position: fixed;

top: 0;

left: 0;

height: 50px;

width: 50px;

z-index: 1;

background: transparent;
}

#drawer-toggle { display: none; }

#drawer-toggle:checked ~ #drawer-toggle-label,
#drawer-toggle:checked ~ header { left: calc(100% - 50px); }

#drawer-toggle:checked ~ #drawer {

width: calc(100% - 50px);

left: 0;
}

#drawer-toggle:checked ~ section.content-wrapper { margin-left: 250px; }

 @media screen and (min-width: 380px) {

#drawer-toggle:checked ~ #drawer-toggle-label,
#drawer-toggle:checked ~ header { left: 300px; }

#drawer-toggle:checked ~ #drawer {

width: 300px;

left: 0;
}

}

El CSS para el estilo del menú de dibujo.

#drawer {

position: fixed;

top: 0;

padding-top: 50px;

height: 100%;

width: 250px;

background: #2f2f2f;

overflow-x: hidden;

overflow-y: auto;

left: -250px;
 background:
}

#drawer ul {

list-style: none;

padding: 0;
}

#drawer li a {

display: block;

color: #fff;

text-decoration: none;

text-align: center;
}

#drawer li {

margin: 0;

width: 100%;

padding: 10px 0
}

#drawer { padding-top: 10px; }