Lightweight, Simple, Styleable jQuery + CSS Dropdown Menu Plugin

License You are free to use this script for commercial and non-commercial projects. I would love to hear from you if you use it or have input. If you find this dropdown script to be especially useful and can donate some funds, thank you and here is the link to donate:

Features Clean, minimalist design, ready to be styled. Ease of use and styling are the goals. This should be a great starting point if you are looking to create a similar menu.

Handles submenu items appearing outside the viewport/window

For mobile/touch devices, ensures an item's submenu is showing before allowing its link to be opened

Option for either horizontal or vertical menu

Supports variable-width menu items. Vertical menus must have a width defined at the root, but submenus are still variable.

Independent timers on open/close of submenus to reduce accidental menu operations

Option to automatically add arrows indicating submenus

Option to automatically apply a CSS3 drop shadow class to submenus

Customizable submenu display animation using jQuery's animate() effects

effects Functioning in tests with Chrome, Firefox, Safari, IE >= 7, Android WebKit, and Android Firefox

Usage Include the jQuery library, dropdown-menu.min.js and dropdown-menu.css on the page: <link rel="stylesheet" href="dropdown-menu.css" /> <script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="dropdown-menu.min.js"></script> Use a standard UL/LI menu with anchors: <ul class="dropdown-menu"> <li><a href="#">Item 1</a></li> <li> <a href="#">Item 2</a> <ul> <li> <a href="#">Submenu Item</a> <ul> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> </ul> </li> </ul> </li> </ul> Apply the dropdown_menu() function in a Document Ready section: <script type="text/javascript"> $(function() { $('.dropdown-menu').dropdown_menu(); }); </script> See Example 1 and dropdown-menu-skin.css for styling hints. See Example 2 source code for complete configuration options.

Demonstrations

Acknowledgements By Daniel Upshaw. This script was inspired by the classic jQuery menu plugin Superfish, which was inspired by ALA's Suckerfish.

Please enable JavaScript to view the comments powered by Disqus.

danielupshaw.com