nmcDropDown: A Drop-Down Menu Plugin for jQuery

21 Comment(s) | Posted October 14, 2009 by Eli Van Zoeren |

Eli Van Zoeren

Eli Van Zoeren is a front-end developer and designer at New Media Campaigns. Previously, he received a degree in Visual Communications from Beloit College and had a successful freelance career. You can find out what he's been up to at his personal website or on Twitter.

In my post on using template site to save time, I included a quick jQuery plugin for creating drop-down menus. Although that code has served me well I thought it was time to revisit it and make it more flexible and bullet-proof. This is the updated version that I will be including in my blank site template going forward

I found that I was still having to modify my plugin code to accomodate variations in interaction design. Since I sometimes wanted the menus to only appear whe n the y are clicked—rather than on hover—now that is an option. Also, when the top-level menu items are smaller (or when the sub-menus fly out from the side) the usability can be vastly increased by Brian Cherne's wonderful hoverIntent plugin. HoverIntent keeps the sub-menu from disappearing if your pointer leaves the edge for a split-second. This version will use hoverIntent automatically if you have it; otherwise it will revert to the standard hover event. I recommend copying the minified version of hoverIntent into the bottom of your main JavaScript file. It is quite small and including it in your main file will save an http request and speed up your page loading time.

Usage

You should create your navigation as a nested unordered list. Linking the top-level items is optional and will not change the working of the plugin. You should style your menu first with css. How you do that is up to you, but you should set the sub-menus to display: none (this is actually optional, but will prevent the sub-menus from flashing on page-load).

<ul id="nav">
    <li>About
        <ul>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Board of Directors</a></li>
            <li><a href="#">Contact Info</a></li>
        </ul>
    </li>
    <li><a href="#">Products</a>
        <ul>
            <li><a href="#">Widgets</a></li>
            <li><a href="#">Doohickeys</a></li>
            <li><a href="#">Thing-a-ma-bobs</a></li>
        </ul>
    </li>
</ul>

The nmcDropDown plugin comes with sensible defaults, so you can just call it on the <ul> element that contains your navigation. The plugin will check each menu item to see if it has a sub-menu and set it up as a drop-down if it does.

$('#nav').nmcDropDown();

Configuration

If you want more control over the way your menu works, there are a number of configuration options available to you. Pass an object containing any that you want to change in as the first parameter of the nmcDropDown() call.

$('#nav').nmcDropDown({trigger: 'click'});

Available Options:

trigger: Event on which to show or hide the sub-menu, can be 'hover' or 'click'. ('hover')
active_class: Class to give open menu items, useful for styling. ('open')
submenu_selector: The element immediately below the top-level list-items containing the sub-menu. ('ul')
show: Effect(s) to use when showing the sub-menu. ({opacity: 'show'})
show_speed: Speed of the show transition. (300)
show_delay: Delay before the sub-menu is shown (requires HoverIntent). (50)
hide: Effect(s) to use when hiding the sub-menu. ({opacity: 'hide'})
hide_speed: Speed of the hide transition. (200)
hide_delay: Delay before the sub-menu is hidden (requires HoverIntent). (50)
fix_IE: This will attempt to fix IE 6 and 7's problems with z-index, where the sub-menu appears behind the body of the page. Set to false if it is interfering with your other styling. (true)

Example

We recently launched a website for North Carolina Business Opportunity and Workforce Development, a program that helps women, minorities, and small businesses secure NCDOT contracts. I created drop-down menus that use the nmcDropDown plugin with custom show and hide animations for an interesting effect. The show animation is {opacity: 'show', top: '-=10px'} (hide is exactly the reverse), which fades the menu in while sliding it up from below.

Update: I have also created and written up an example of how to use nmcDropDown, including HTML and CSS.