Animated Multi-level Dropdown Menu Plugin For jQuery - dropotron

File Size: 10.6 KB
Views Total: 16004
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></script>
<script src="jquery.dropotron.js"></script>

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

<nav id="main-nav">
    <li><a href="#">Home</a></li>
    <li> <a href="#">Category</a>
        <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>
    <li> <a href="#">Works</a>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li> <a href="#">More ...</a>
            <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>
        <li><a href="#">Item 3</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>

3. Call the plugin on the top level ul.

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

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 { background: #999; }

#main-nav ul 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 > > 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.