Lightweight, Simple, Styleable jQuery + CSS Dropdown Menu Plugin

Download

Updated 11/6/13 to work with the latest 1.x jQuery.

Full Archive: dropdown-menu.zip

GitHub Project Homepage

License

If you find this dropdown script to be especially useful and would like to donate some funds, you are welcomed to do so via PayPal:

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

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.

Comments

comments powered by Disqus

danielupshaw.com