El menú de cajones Fly-out Pure de CSS/CSS3

Vista prévia

Descripción

Crea un menú de cajones con estilo y Fly-out con impresionantes animaciones de CSS3 con tecnología larguero. Coloca el cursor sobre la barra lateral para ver el submenú que se desliza desde el borde de la pantalla. Hecho por < a href = "https://codepen.io/IanLunn" target = "_ blank" rel = "noopener" > IanLunn .

Funcionamiento

Cargue el prefixfree. min. js en el encabezado de las correcciones de proveedores de CSS3.

<script src="prefixfree.min.js"></script>

Cargue el Font awesome 4 para los iconos de menú (no es necesario, pero recomendado).

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Cree el menú del cajón con una lista HTML anidada.

<ul class="drawer">

<li> <a href="#"> <i class="fa fa-info-circle"></i> <span>Home</span> </a>


<ul>



<li> <a href="#"> <i class="fa fa-question-circle"></i> <span>About</span> </a> </li>



<li> <a href="#"> <i class="fa fa-phone-square"></i> <span>Contact</span> </a> </li>


</ul>

</li>
</ul>

Añadir CSS RESET.

body,
ul {

margin: 0;

padding: 0;
}

Las reglas de estilo CSS/CSS3 de Core para el menú emergente.

body { background: #45163E; }

.drawer {

position: absolute;

z-index: 10;

top: 0;

left: 0;

height: 100%;

padding: .4em 0;

background: #7D294E;

color: white;

text-align: center;

font-size: 0;
}

.drawer li {

pointer-events: none;

position: relative;

display: inline-block;

vertical-align: middle;

list-style: none;

line-height: 100%;

transform: translateZ(0);
}

.drawer a {

pointer-events: auto;

position: relative;

display: block;

min-width: 5em;

margin-bottom: .4em;

padding: .4em;

line-height: 100%;

font-size: 16px;

text-decoration: none;

color: white;

transition: background 0.3s;
}

.drawer a:active,
.drawer a:focus { background: #B44659; }

.drawer i {

display: block;

margin-bottom: .2em;

font-size: 2em;
}

.drawer span {

font-size: .625em;

font-family: sans-serif;

text-transform: uppercase;
}

.drawer li:hover ul {

transform: translateX(0);

background: #B44659;/* Enable this if you wish to replicate hoverIntent */
}

.drawer > li { display: block;}

.drawer > li > a { background: #7D294E; }

.drawer > li:hover { z-index: 100; }

.drawer > li:hover a { background: #B44659; }

.drawer > li a:hover { background: #F56356; }

.drawer > li > a:after {

content: "";

position: absolute;

top: 0;

bottom: 0;

left: 100%;

width: 4px;

opacity: 0;

background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);

background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, transparent));

background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);

background: -o-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);

background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);

background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, transparent 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000', GradientType=1 );

transition: opacity 0.5s;
}

.drawer > li:hover a:after { opacity: 1; }

.drawer > li ul {

position: absolute;

z-index: -1;

top: 0;

left: 100%;

height: 100%;

width: auto;

white-space: nowrap;

transform: translateX(-100%);

background: #B44659;

transition: 0.5s transform;
}