Animated Multi-level Dropdown Menu Plugin For jQuery - dropotron

Dropotron is a compact yet customizable jQuery plugin which enables you to append an animated, ul list based, multilevel drop down menu to any element.

How to use it:

1. Import jQuery library and the jQuery dropotron plugin into the web page.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery.dropotron.js"></script>

2. Uses nested html unordered lists to create a multilevel dropdown nav menu.

<nav id="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li> <a href="#">Category</a>
      <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
      </ul>
    </li>
    <li> <a href="#">Works</a>
      <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li> <a href="#">More ...</a>
          <ul>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
          </ul>
        </li>
        <li><a href="#">Item 3</a></li>
      </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

3. Call the plugin on the top level ul.

$('#main-nav > ul').dropotron({ 
// OPTIONS HERE
});

4. Style the multilevel dropdown menu whatever you like.

#main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#main-nav ul li {
  display: inline-block;
  margin: 0 1em 0 1em;
  padding: 0.35em 0.75em 0.35em 0.75em;
  border-radius: 0.5em;
}

#main-nav ul li.active { background: #999; }

#main-nav ul li.active a {
  color: #fff;
  text-decoration: none;
}

/* A single menu */

.dropotron {
  background: #444;
  border-radius: 0.5em;
  list-style: none;
  margin: 0;
  min-width: 10em;
  padding: 0.75em 1em 0.75em 1em;
}

.dropotron > li {
  border-top: solid 1px #555;
  margin: 0;
  padding: 0;
}

.dropotron > li:first-child { border-top: 0; }

.dropotron > li > a {
  color: #ccc;
  display: block;
  padding: 0.5em 0 0.5em 0;
  text-decoration: none;
}

.dropotron > li.active > a,
.dropotron > li:hover > a { color: #fff; }

/* Only applies to top level ("level-0") menus */

.dropotron.level-0 { margin-top: 1.25em; }

.dropotron.level-0:before {
  content: '';
  position: absolute;
  border-bottom: solid 0.5em #444;
  border-left: solid 0.5em transparent;
  border-right: solid 0.5em transparent;
  top: -0.5em;
}

5. Set the default options.

$('#main-nav > ul').dropotron({ 

// Parent jQuery object.
selectorParent: null,

// Base Z-Index.
baseZIndex: 1000,

// Menu class (assigned to every <ul>).
menuClass: 'dropotron',

// Expansion mode ("hover" or "click").
expandMode: 'hover',

// Hover delay (in ms).
hoverDelay: 150,

// Hide delay (in ms; 0 disables).
hideDelay: 250,

// Opener class.
openerClass: 'opener',

// Active opener class.
openerActiveClass: 'active',

// Submenu class prefix.
submenuClassPrefix: 'level-',

// Menu mode ("instant", "fade", "slide", "zoom").
mode: 'fade',

// Menu speed ("fast", "slow", or ms).
speed: 'fast',

// Easing mode ("swing", "linear").
easing: 'swing',

// Alignment ("left", "center", "right").
alignment: 'left',

// Submenu offset X.
offsetX: 0,

// Submenu offset Y.
offsetY: 0,

// Global offset Y.
globalOffsetY: 0,

// IE Offset X.
IEOffsetX: 0,

// IE Offset Y.
IEOffsetY: 0,

// If true and mode = "fade", prevents top-level opener fade.
noOpenerFade: true,

// Detach second level menus (prevents parent style bleed).
detach: true,

// If true and detach = true, leave original menu intact.
cloneOnDetach: true   

});

---

This awesome jQuery plugin is developed by ajlkn. For more Advanced Usages, please check the demo page or visit the official website.