Animated Multi-level Dropdown Menu Plugin For jQuery - dropotron
File Size: | 10.6 KB |
---|---|
Views Total: | 15886 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.