CSS sólo responsive menú desplegable-JMenu

Vista prévia

Descripción

JMenu es un menú adaptable CSS puro que contrae automáticamente la barra de navegación desplegable normal en un menú deslizante móvil con o sin el botón de alternancia.

Funcionamiento

Inserte la hoja de estilos principal ' JMenu. min. css ' en la sección head del documento.

<link rel="stylesheet" href="jmenu.min.css">

Cree el menú adaptable desde una lista de navegación.

<nav class="jmenu">

<ul>


<li><a href="javascript:void(0)">Home</a></li>


<li><a href="javascript:void(0)">Categories</a></li>


<li><a href="javascript:void(0)">About</a></li>


<li><a href="javascript:void(0)">Contact</a></li>

</ul>
</nav>

También es compatible con la lista anidada para el menú desplegable multinivel.

<nav class="jmenu">

<ul>


<li><a href="#">Home</a></li>


<li class="jm-dropdown">



<a href="javascript:void(0)">Categories<span class="jm-icon-dropdown"></span></a>



<ul>




<li><a href="javascript:void(0)">Apples</a></li>




<li><a href="javascript:void(0)">Bananas and Pears</a></li>




<li><a href="javascript:void(0)">Oranges</a></li>



</ul>


</li>


<li><a href="javascript:void(0)">About</a></li>


<li><a href="javascript:void(0)">Contact</a></li>

</ul>
</nav>

Agregue un botón de alternancia al menú adaptable en dispositivos móviles.

<nav class="jmenu">

<label for="menu-btn" class="jm-menu-btn jm-icon-menu"></label>

<input type="checkbox" id="menu-btn" class="jm-menu-btn">

<ul class="jm-collapse">


<li><a href="javascript:void(0)">Home</a></li>


<li class="jm-dropdown">



<a href="javascript:void(0)">Categories</a>



<ul>




<li><a href="javascript:void(0)">Apples</a></li>




<li><a href="javascript:void(0)">Bananas and Pears</a></li>




<li><a href="javascript:void(0)">Oranges</a></li>



</ul>


</li>


<li><a href="javascript:void(0)">About</a></li>


<li><a href="javascript:void(0)">Contact</a></li>

</ul>
</nav>