HTML/CSS solo desactivado-Canvas Slide y Push Navigation

Vista prévia

Descripción

Una solución de navegación moderna y amigable para móviles para crear una diapositiva fuera de lienzo o un menú Push usando CSS/CSS3 puro y HTML simple. Actualmente proporciona 4 archivos CSS para definir el aspecto del menú fuera del lienzo:

• Slide. CSS: menú deslizante de la izquierda
• right-slude. CSS: menú deslizante derecho
• left-Push. CSS: menú Push izquierdo
• right-Push. CSS: menú pulsador derecho

¿Cómo funciona?

Cargue Slide. CSS para crear un menú deslizante izquierdo en su página web.

<link rel="stylesheet" href="css/slide.css">

Cargue el Font awesome 4 para los iconos de alternancia de menú.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

Cree un control de alternancia de menú mediante cortes de CheckBox CSS.

<input type="checkbox" id="offcanvas-menu" class="toggle" />

La estructura HTML para el menú deslizante.

<aside class="menu-container">


<div class="menu-heading clearfix">


<label for="offcanvas-menu" class="close-btn">



<i class="fa fa-times"></i>


</label>

</div><!--end menu-heading-->

<nav class="slide-menu">

<ul>


<li><a href="#"><i class="fa fa-home"></i>Home</a></li>


<li><a href="#"><i class="fa fa-star"></i>Favorites</a></li>


<li><a href="#"><i class="fa fa-folder-open"></i>Categories</a></li>


<li><a href="#"><i class="fa fa-cogs"></i>Settings</a></li>

</ul>
</nav><!--end slide-menu -->

</aside>

Cree un botón de alternancia de menú dentro del contenido principal.

<label for="offcanvas-menu" class="full-screen-close"></label>

<div class="menu">

<label for="offcanvas-menu" class="toggle-btn">


<i class="fa fa-bars"></i>

</label>
</div>