Basic Multi-level DropDown Menu – Droppy

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
} );