Author: | OutlawPlz |
---|---|
Views Total: | 31 views |
Official Page: | Go to website |
Last Update: | April 4, 2025 |
License: | MIT |
Preview:

Description:
Droppy is a pure JavaScript library that helps you generate modern, animated, customizable, multi-level dropdown menus.
How to use it:
1. Install and import the Droppy.
# NPM $ npm install droppy-menu
import Droppy from '@/droppy-menu/src/droppy.js';
<!-- OR --> <script defer type="module" src="/src/droppy.js"></script>
2. Insert your hierarchical menu data into nested html lists as follows:
<nav data-menu> <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> </nav>
3. Style your dropdown using CSS.
li > .dropdown { display: none; /* more styles here */ }
4. Initialize the Droppy.
const trigger = document.querySelector('li > a'); const dropdown = document.querySelector('li > ul'); const droppy = new Droppy(trigger, dropdown, { // Options... });
5. All default configuration options.
const droppy = new Droppy(trigger, dropdown, { animationIn: '', animationOut: '', display: 'block', triggerActiveClass: 'active', preventDefault: false, });
6. API methods.
droppy.show(); droppy.hide(); droppy.toggle();
Changelog:
v2.2.1 (04/04/2025)
- Adds Promise to show() and hide() methods.
- Adds modalGenerator function.
v2.2.0 (03/14/2025)
- Adds beforetoggle and toggle events.
- Adds tabsGenerator function.
- Adds triggerActiveClass to DroppyOptions.
- Renames generator to menuGenerator.
- Removes clickAwayToClose from DroppyOptions.
- The DroppyContext no longer registers the click handler used for the ‘click away’ functionality.