Lightweight, Simple, 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

Containing files:
- arrows-000000.png (view)
- arrows-ffffff.png (view)
- dropdown-menu-skin.css (raw) (highlighted)
- dropdown-menu.css (raw) (highlighted)
- dropdown-menu.js (raw) (highlighted)
- dropdown-menu.min.js (raw) (highlighted)

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>

Lightweight, Simple, Styleable jQuery + CSS Dropdown Menu Plugin

Download

License

Features

Usage

Demonstrations

Example 1 - Custom CSS3 Skin and Increased Menu Close Delay

Example 2 - All Options Specified (Default Values)

Example 3 - Specify Options With HTML5 Data Attribute

Example 4 - Vertical Style Menu With Shadows and Arrows

Acknowledgements