Author: | OutlawPlz |
---|---|
Views Total: | 864 views |
Official Page: | Go to website |
Last Update: | October 13, 2016 |
License: | MIT |
Preview:

Description:
Droppy is a pure JavaScript library that helps you generate a basic accordion-style multi-level dropdown menu. You can freely style it using your own CSS styles.
How to use it:
Add the Droppy’s JavaScript and CSS files to the webpage.
<link href="droppy.css" rel="stylesheet"> <script src="js/droppy.js"></script>
Insert your hierarchical menu data into nested html lists as follows:
<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>
Initialize the Droppy.
var element = document.querySelector( 'ul.menu' ); var droppy = new Droppy( element);
Default configuration options.
var droppy = new Droppy( element, { dropdown_selector: 'li > ul.menu', trigger_selector: 'a', close_others: true } );