nmcDropDown: A Drop-Down Menu Plugin for jQuery

October 14, 2009

 Update 6/23/20 – The post below deals with the technical side of implementing custom dropdown menus. If you're still in the brainstorming phase, you may also be interested in our recent post, Examples of Dropdown Menus on Websites


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 when they 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.


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><a href="#">Profile</a></li>
            <li><a href="#">Board of Directors</a></li>
            <li><a href="#">Contact Info</a></li>
    <li><a href="#">Products</a>
            <li><a href="#">Widgets</a></li>
            <li><a href="#">Doohickeys</a></li>
            <li><a href="#">Thing-a-ma-bobs</a></li>

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.



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)


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.


Full, commented version (3.5kb)

Minified version (1.3kb)


Joel Sutherland's avatar
Joel Sutherland NMC team member
Jason, This was written well before 1.4 was released. I am sure that the built in delay would be much more efficient.
Jason Chandler's avatar
Jason Chandler
I'm just curious why you'd use another plugin for hover delay when jQuery 1.4 includes delay(). Wouldn't this provide the same functionality (and without the extra weight)? Just curious. Anyone else here tried it? If not, I'll see what I can do to change the plugin.
123doing's avatar
It's very good. I like this. Thanks for share. And I wrote something to introduce this project for my readers. You can find the post about this in my website. If something is wrong,pls figure it out.thanks.
ilahiler's avatar

Thank you for Write

onur's avatar

Thank you! You helped a lot!

film izle's avatar
film izle

Very good plugin, nice and easy!
Ivo: I had the same problem, both in ie7 & ie8. Thank you so much for the solution!

wespai's avatar

thx collect it to ajax.wespai.com

Jonathan Kowalski's avatar
Jonathan Kowalski

same problem tahn ivo, same fix, thanks a lot !

Nemanja Cosovic's avatar
Nemanja Cosovic

Thank you! You helped a lot!

Erik Jonsson's avatar
Erik Jonsson

Very good plugin, nice and easy!
Ivo: I had the same problem, both in ie7 & ie8. Thank you so much for the solution!

ivo's avatar


thx for this great plugin. It works all fine in Firefox but I had to replace some code to get it working in internet explorer 8.

I had to change "menu = $(this);" in "var menu = $(this);" on line 26.

greets ivo

Lenny's avatar

I am sure it is in my CSS somewhere. I just cant get the menu to appear when hovered over. Might have to do with my display settings. Your new post may shed some light on it and I will look there before hitting you up again...


Eli Van Zoeren's avatar
Eli Van Zoeren

William, Lenny, & magburner: Please see my new post at http://www.newmediacampaigns.com/page/easy-menus-with-nmcdropdown for a simple demo of how to use this script in real life. (Including a fall-back method in case js is disabled. So you can keep your tinfoil hat on.)

magburner's avatar

It looks fancy enough, but... There are no links if JavaScript is disabled. How is a guy (with a tinfoil hat,) supposed to navigate the website?

Eli Van Zoeren's avatar
Eli Van Zoeren

William: Not right now. I will work on putting one together once I have some time.

Lenny: It should just depend on you css. What kind of problems are you having?

William: You can probably get most of what you need from the linked example. Otherwise, as I said above, I will create an example to demonstrate the html and css at some point.

William Rouse's avatar
William Rouse

Or anyone, where did you get the code to start to try? Could you share?

Lenny's avatar

Eli -

I cannot get this to work in IE7. Are there any IE7 tip I ned to know about or did i just break something :)

William Rouse's avatar
William Rouse

Is there a full souce demmo available?

ghprod's avatar

another great dropdown menu with jQuery!

great job :D


Lenny Terenzi's avatar
Lenny Terenzi

Thanks Eli!

I actually agree and after some thought will probably convince my client to keep it simple and navigate to any subsections from its parent section.

Anyway - great work and thanks for quick reply!

Eli Van Zoeren's avatar
Eli Van Zoeren

Lenny: I will definitely keep multiple levels in mind for a future version. I tend to avoid more than one level, just out of usability concerns, but I recognize that they are sometimes necessary. I will keep you posted!

p.s. Thanks for the compliment!

Lenny Terenzi's avatar
Lenny Terenzi

This may be a lifesaver for me! Is there any way to have multi-level drop downs out of this? I am far from a developer but I know enough to get around.

As an aside for anyone else who reads this NMC does GREAT work. I have used them on many project and every one has gone very smooth!

orbitdesign's avatar

Thank you vary much
cool :)

joseph's avatar

it's really wonderful jQuery menu resources, i like it, stunning!

Mark Fulton's avatar
Mark Fulton

This is one of the best looking and smooth functioning drop down navigations I've seen, and I've searched alot! Thank you very much for this article and code.

I wasn't aware that multiple JavaScript file calls would have a significant effect on load time, makes sense.. thanks for that tip as well.

Leave a comment