nmcDropDown: A Drop-Down Menu Plugin for jQuery

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

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.

Download

Full, commented version (3.5kb)

Minified version (1.3kb)

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

Comments

Mark Fulton

October 15, 2009 at 5:33pm | Permalink

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.
joseph

October 16, 2009 at 9:41am | Permalink

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

October 16, 2009 at 3:09pm | Permalink

Hello,
Thank you vary much
cool :)
Lenny Terenzi

October 19, 2009 at 10:57am | Permalink

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!
Eli Van Zoeren

October 19, 2009 at 1:17pm | Permalink

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

October 19, 2009 at 2:02pm | Permalink

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!
ghprod

October 20, 2009 at 9:24am | Permalink

another great dropdown menu with jQuery!
great job :D
regards
William Rouse

October 23, 2009 at 2:37pm | Permalink

Is there a full souce demmo available?
Lenny

October 26, 2009 at 3:15pm | Permalink

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

October 27, 2009 at 8:09pm | Permalink

Lenny:
Or anyone, where did you get the code to start to try? Could you share?
Thanks
Eli Van Zoeren

October 28, 2009 at 9:17am | Permalink

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.
magburner

October 30, 2009 at 5:37pm | Permalink

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

November 2, 2009 at 11:35am | Permalink

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.)
Lenny

November 2, 2009 at 12:29pm | Permalink

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...
Thanks!
ivo

November 22, 2009 at 2:12pm | Permalink

Hi,
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
Erik Jonsson

November 26, 2009 at 2:55am | Permalink

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

December 6, 2009 at 5:28pm | Permalink

Thank you! You helped a lot!
Jonathan Kowalski

December 7, 2009 at 4:47am | Permalink

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

December 25, 2009 at 4:25am | Permalink

thx collect it to ajax.wespai.com
film izle

January 19, 2010 at 2:04pm | Permalink

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

January 19, 2010 at 2:06pm | Permalink

Thank you! You helped a lot!
ilahiler

April 30, 2010 at 1:15pm | Permalink

Thank you for Write
123doing

June 21, 2010 at 10:37pm | Permalink

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.
Jason Chandler

July 1, 2010 at 1:26pm | Permalink

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.
Joel Sutherland

July 1, 2010 at 5:44pm | Permalink

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

July 2, 2010 at 11:22am | Permalink

Joel, the plugin is great-so tiny! I love it. I'm using superFish now but this is a much smaller script so nice work! I did remove hoverIntent from yours and it seems to work fine. IF you want a copy I'll post a link here for your readers. Thank you for writing this elegant plugin.
Max Diaz

November 15, 2010 at 1:13am | Permalink

Great simple plugin!

However, when going back to a page linked from a submenu, that menu remains open (using the .min 103 version). I tried to look at your code 105, but then it didn't work at all. The culprit are two lines that have "$(e || this)" instead of $(this).

Anyway, after changing this, I saw you had already fixed submenus in version 105 (as well as the var menu mentioned above), so caveat emptors of the minified version in downloads...
dick

December 30, 2010 at 2:36am | Permalink

THS for this great plugins
Cyrille Lancien

January 21, 2011 at 12:26pm | Permalink

Hy, tanks this great plugins, it looks very nice !

I have just a suggestion about internal variable in this function :

// iterate each matched element
return this.each(function() {
...
}

All variable should be declare with the 'var' keyword. This because they don't, they will be assume te be part of the window context, and then will be shared will the 'rest of the world' and might cause trouble. In fact, I see a post witch propose to fix a bug for IE, adding the 'var' keyword on 'menu' variable. You should do the same for all internal variables : menu, submenus, over and out.

Doing this, your code will more secure and quick.

Best regards
banana

May 7, 2011 at 11:56am | Permalink

Thank you for a good plugin.
Julian

June 30, 2011 at 12:45pm | Permalink

Can you pleas show a full download link?

Thanks!
alexey

September 22, 2011 at 8:51am | Permalink

You can try this plugin:
http://jqplug.appspot.com/plugins/dropdown-menu/demo
Gaurav Mehra

March 26, 2012 at 3:35pm | Permalink

it does not hide if we click out side of the dropdown if we choose to make trigger = 'click'.

Any help

Thanks in advance
Shadde

June 18, 2012 at 10:35pm | Permalink

Great plugin, thanks.

And @ivo, thanks for your advice to help me fixing problem on IE8.