Menú desplegable básico de varios niveles-Droppy
| Autor: | OutlawPlz |
|---|---|
| Views Total: | 2,003 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 13, 2016 |
| Licencia: | MIT |
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
} );





