Menú desplegable básico de varios niveles-Droppy

Vista prévia

Descripción

Droppy es una biblioteca de JavaScript puro que le ayuda a generar un menú desplegable de varios niveles de estilo acordeón básico. Puede estilo libremente utilizando sus propios estilos CSS.

Funcionamiento

Agregue los archivos JavaScript y CSS de Droppy a la Página Web.

<link href="droppy.css" rel="stylesheet">
<script src="js/droppy.js"></script>

Inserte los datos del menú jerárquico en las listas HTML anidadas de la siguiente manera:

<ul class="menu">

<li class="menu-item">


<a href="#"><span>Prodotti</span></a>


<ul class="menu">



<li class="menu-item"><a href="#">Economici</a></li>



<li class="menu-item">




<a href="#">Costosi</a>




<ul class="menu">





<li class="menu-item"><a href="#">Nuovo</a></li>





<li class="menu-item"><a href="#">Usato</a></li>




</ul>



</li>



<li class="menu-item"><a href="#">Via di mezzo</a></li>


</ul>

</li>

<li class="menu-item">


<a href="#">Novità</a>


<ul class="menu">



<li class="menu-item"><a href="#">Aprile</a></li>



<li class="menu-item"><a href="#">Marzo</a></li>



<li class="menu-item"><a href="#">Febbraio</a></li>



<li class="menu-item"><a href="#">Gennaio</a></li>


</ul>

</li>

<li class="menu-item">


<a href="#">Azienda</a>


<ul class="menu">



<li class="menu-item"><a href="#">Chi siamo</a></li>



<li class="menu-item"><a href="#">Dove siamo</a></li>



<li class="menu-item"><a href="#">Cosa facciamo</a></li>


</ul>

</li>

<li class="menu-item"><a href="#">Contatti</a></li>
</ul>

Inicialice el Droppy.

var element = document.querySelector( 'ul.menu' );

var droppy = new Droppy( element);

Opciones de configuración predeterminadas.

var droppy = new Droppy( element, {

dropdown_selector: 'li > ul.menu',

trigger_selector: 'a',

close_others: true
} );