Navegación lateral adaptable con JavaScript y CSS3

Vista prévia

Descripción

Vertical Responsive Menu is a small JavaScript library which helps you create a mobile-friendly, fully responsive and space-saving sidebar navigation for your web projects. On small screens, it will converts the sidebar navigation into an off-canvas menu with a toggle icon when the viewport's size reaches the breakpoint specified in the CSS3 media queries (default to 992px).

Funcionamiento

Cargue la hoja de estilos vertical-responsive-menu. min. CSS requerida y el script vertical-responsive-menu. min. js en el proyecto.

<link href="vertical-responsive-menu.min.css" rel="stylesheet">
<script src="vertical-responsive-menu.min.js"></script>

Cree una lista de navegación anidada para el desplazamiento de barra lateral multinivel como sigue:

<nav class="vertical_nav">

<ul id="js-menu" class="menu">


<li class="menu--item
menu--item__has_sub_menu">



<label class="menu--link" title="Item 1">



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



<span class="menu--label">Item 1</span>


</label>



<ul class="sub_menu">



<li class="sub_menu--item">




<a href="#" class="sub_menu--link sub_menu--link__active">Submenu</a>



</li>



<li class="sub_menu--item">




<a href="#" class="sub_menu--link">Submenu</a>



</li>



<li class="sub_menu--item">




<a href="#" class="sub_menu--link">Submenu</a>



</li>


</ul>

</li>


<li class="menu--item">


<a href="#" class="menu--link" title="Item 2">



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



<span class="menu--label">Item 2</span>


</a>

</li>


<li class="menu--item">


<a href="#" class="menu--link" title="Item 3">



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



<span class="menu--label">Item 3</span>


</a>

</li>


<li class="menu--item
menu--item__has_sub_menu">



<label class="menu--link" title="Item 4">



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



<span class="menu--label">Item 4</span>


</label>



<ul class="sub_menu">



<li class="sub_menu--item">




<a href="#" class="sub_menu--link">Submenu</a>



</li>



<li class="sub_menu--item">




<a href="#" class="sub_menu--link">Submenu</a>



</li>



<li class="sub_menu--item">




<a href="#" class="sub_menu--link">Submenu</a>



</li>


</ul>

</li>


<li class="menu--item">


<a href="#" class="menu--link" title="Item 5">



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



<span class="menu--label">Item 5</span>


</a>

</li>

</ul>

<button id="collapse_menu" class="collapse_menu">

<i class="collapse_menu--icon"></i>

<span class="collapse_menu--label">Recolher menu</span>
</button>

</nav>

Puede cambiar el punto de interrupción lo que quiera en el CSS.

@media (min-width: 992px) {

...

}

Registro de cambios

07/14/2016

• El menú fijo se cierra cuando se hace clic en el elemento del submenú