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

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

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

Comments

comments powered by Disqus

danielupshaw.com