Creación de un menú CSS puro fuera de lienzo usando Flexbox

Vista prévia

Descripción

Una barra lateral vertical de estilo aplicación móvil sistema de navegación fuera de lienzo creado por < a href = "https://codepen.io/zomigi" target = "_ blank" rel = "noopener" > zomigi que se hace sólo con CSS & CSS3. Utiliza Flexbox para controlar el diseño de modo que cuando el menú se hace visible, el área de contenido puede cambiar de tamaño para ajustarse al ancho restante en la ventanilla, en lugar de desbordar la ventanilla y obtener cortado en el lado derecho, como sucede con la mayoría de los menús fuera del lienzo.

Uso básico

Crear un icono de hamburguesa para el botón de alternar menú utilizando casilla de verificación entrada.

<input id="hamburger" type='checkbox' class="hamburger-checkbox">
<label for="hamburger" class="hamburger-label" role="button" aria-labelledby="menu">&#xf0c9;</label>

El CSS para el estilo del botón de alternancia.

.hamburger-checkbox {

position: absolute;

opacity: 0;
}

.hamburger-label {

position: absolute;

top: 32px;

left: 32px;

z-index: 1;

display: block;

width: 42px;

height: 42px;

font: 42px/42px fontawesome;

text-align: center;

color: #444;

cursor: pointer;
}

.hamburger-checkbox:checked ~ .hamburger-label:before {

content: '\f00d';

position: absolute;

top: 0;

left: 0;

z-index: 1;

display: block;

width: 42px;

height: 42px;

font: 42px/42px fontawesome;

text-align: center;

color: #eee;
}

.hamburger-checkbox:checked ~ .sidebar {

width: auto;

height: auto;

padding-top: 6.5em;
}

Cree el menú fuera del lienzo utilizando la lista desordenada

<nav class="sidebar">

<ul class="menu">


<li>Home</li>


<li>Contact</li>


<li>About</li>


<li>Blog</li>

</ul>
</nav>

Las reglas CSS/CSS3 para activar el menú fuera del lienzo.

.sidebar {

overflow: hidden;

width: 0;

height: 0;

background: #444;

color: #eee;

transition: all .3s;
}

.menu { list-style: none; }

.menu li {

padding: 16px 32px;

border-top: 1px solid #2b2b2b;
}

.menu li:last-child { border-bottom: 1px solid #2b2b2b; }