Menú de cajón deslizante en CSS puro

Vista prévia

Descripción

Una biblioteca PURE CSS/CSS3 utilizada para crear cajones deslizantes de estilo aplicación Android que soportan las 4 direcciones (arriba, abajo, derecha, izquierda). Basado en iconos IcoMoon y transición CSS3 & propiedades de transformación.

Funcionamiento

Cargue el archivo CSS principal en el encabezado de la página web y estamos listos para ir.

<link rel="stylesheet" href="dist/css/styles.css">

Cree el menú del cajón fuera de la pantalla con un botón de alternancia de menú basado en la casilla de verificación en la página.

<div class="sliding--menu__wrapper">


<input type="checkbox" id="navigation">





<label id="hamburger--icon" for="navigation">


<span class="icon-menu"></span>

</label>





<nav>


<ul>




 <li>




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




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




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



</li>


</ul>

</nav>



<div class="obfuscator">

</div>






</div>

De forma predeterminada, el menú del cajón se deslizará hacia fuera desde el borde izquierdo de la pantalla al alternar. Para cambiar la posición predeterminada, simplemente agregue las siguientes clases CSS al contenedor superior.

<div class="sliding--menu__wrapper slide--bottom">

Bottom
</div>

<div class="sliding--menu__wrapper slide--top">

Top
</div>

<div class="sliding--menu__wrapper slide--right">

Right
</div>