Lightweight, Simple, Styleable jQuery + CSS Dropdown Menu Plugin
Download
Overdue note: This script is more than 7 years old. It used to work consistently on all tested mobile browsers, and now it does not.
Updated 11/6/13 to work with the latest 1.x jQuery.
Full Archive: dropdown-menu.zip
GitHub Project Homepage
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.
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
- 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
Example 1 - Custom CSS3 Skin and Increased Menu Close Delay
Toggle Source
<link rel="stylesheet" href="dropdown-menu.css" />
<link rel="stylesheet" href="dropdown-menu-skin.css" />
<script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="dropdown-menu.min.js"></script>
<script type="text/javascript">
$(function() {
$('#example1').dropdown_menu({
sub_indicators : true,
drop_shadows : true,
close_delay : 500
});});
</script>
<ul id="example1" class="dropdown-menu dropdown-menu-skin">
<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>
Example 2 - All Options Specified (Default Values)
Toggle Source
<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>
<script type="text/javascript">
$(function() {
$('#example2').dropdown_menu({
sub_indicator_class : 'dropdown-menu-sub-indicator', // Class given to LI's with submenus
vertical_class : 'dropdown-menu-vertical', // Class for a vertical menu
shadow_class : 'dropdown-menu-shadow', // Class for drop shadow on submenus
hover_class : 'dropdown-menu-hover', // Class applied to hovered LI's
open_delay : 150, // Delay on menu open
close_delay : 300, // Delay on menu close
animation_open : { opacity : 'show' }, // Animation for menu open
speed_open : 'fast', // Animation speed for menu open
animation_close : { opacity : 'hide' }, // Animation for menu close
speed_close : 'fast', // Animation speed for menu close
sub_indicators : false, // Whether to show arrows for submenus
drop_shadows : false, // Whether to apply drop shadow class to submenus
vertical : false, // Whether the root menu is vertically aligned
viewport_overflow : 'auto', // Handle submenu opening offscreen: "auto", "move", "scroll", or false
init : function() {} // Callback function applied on init
});
});
</script>
<ul id="example2" 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>
Example 3 - Specify Options With HTML5 Data Attribute
You can use JSON data in a data-options
attribute of the UL
. Requires a specific single/double quote precedence.
Toggle Source
<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>
<script type="text/javascript">
$(function() {
$('#example3').dropdown_menu();
});
</script>
<ul id="example3" class="dropdown-menu" data-options='{"sub_indicators":"true","drop_shadows":"true"}'>
<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>
Example 4 - Vertical Style Menu With Shadows and Arrows
For vertical menus, the root menu's width must be specified. Default in stylesheet is 250px.
Toggle Source
<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>
<script type="text/javascript">
$(function() {
$('#example4').dropdown_menu({
sub_indicators : true,
vertical : true
});
});
</script>
<style type="text/css">
#example4 {
width: 250px;
}
</style>
<ul id="example4" 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>
Acknowledgements
By Daniel Upshaw. This script was inspired by the classic jQuery menu plugin Superfish,
which was inspired by ALA's Suckerfish.
Back to DanielUpshaw.com

danielupshaw.com