Blog

Where we discuss our work, thoughts, and process

nmcDropDown: A Drop-Down Menu Plugin for jQuery

ncbowd

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)

Comments

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.

joseph's avatar
joseph

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

orbitdesign's avatar
orbitdesign

Hello,
Thank you vary much
cool :)

Lenny Terenzi's avatar
Lenny Terenzi NMC team member

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's avatar
Eli Van Zoeren NMC team member

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 NMC team member

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's avatar
ghprod

another great dropdown menu with jQuery!

great job :D

regards

William Rouse's avatar
William Rouse

Is there a full souce demmo available?

Lenny's avatar
Lenny NMC team member

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

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

Eli Van Zoeren's avatar
Eli Van Zoeren NMC team member

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's avatar
magburner

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 NMC team member

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's avatar
Lenny NMC team member

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's avatar
ivo

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

Nemanja Cosovic's avatar
Nemanja Cosovic

Thank you! You helped a lot!

Jonathan Kowalski's avatar
Jonathan Kowalski

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

wespai's avatar
wespai

thx collect it to ajax.wespai.com

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!

onur's avatar
onur

Thank you! You helped a lot!

ilahiler's avatar
ilahiler

Thank you for Write

123doing's avatar
123doing
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'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.
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.

Leave a comment

Real Time Web Analytics