Pure CSS OFF-Canvas barra lateral de navegación

Vista prévia

Descripción

Sólo otra navegación de sitio CSS puro que se desliza hacia fuera un menú de la barra lateral de pantalla 0ff cuando se desplaza sobre el botón de disparador de menú.

Funcionamiento

Crea una barra lateral de navegación con un Toggler de hamburguesa.

<nav class="menu">

<span class="hambgr"></span>

<ul>


<li> <a href="#">Menu 1</a> </li>


<li> <a href="#">Menu 2</a> </li>


<li> <a href="#">Menu 3</a> </li>

</ul>
</nav>

El CSS para habilitar la navegación lateral fuera de lienzo.

.menu:hover {

width: 250px;

overflow: visible;
}

.menu {

background: #00aff0;

border-right: 1px solid #038ec1;

position: absolute;

top: 0;

bottom: 0;

height: 100%;

left: 0;

width: 60px;

overflow: hidden;

-webkit-transition: width .05s linear;

transition: width .05s linear;

-webkit-transform: translateZ(0) scale(1, 1);

z-index: 100;
}

.menu > ul { padding-left: 60px; }

.menu:hover ul { padding-left: 0; }

.menu:hover .hambgr { display: none; }

.menu li {

position: relative;

display: block;

width: 250px;

overflow: hidden;
}

.menu li a {

border-collapse: collapse;

border-spacing: 0;

color: #fff;

display: block;

padding: 10px;

position: absolute;

text-decoration: none;

transition: all 0.1s linear 0s;

width: 100%;

position: relative;

z-index: 1;
}

.menu li a:hover { background: #038ec1; }

.hambgr {

height: 4px;

width: 30px;

background: #fff;

position: absolute;

top: 20px;

left: 14px;
}

.hambgr:before, .hambgr:after {

background: #fff;

content: "";

height: 4px;

position: absolute;

top: -7px;

width: 30px;
}

.hambgr:after { top: 7px; }