$3.50/MONTH UNLIMITED WEB HOSTING - YES, SERIOUSLY.
Create The Fanciest Dropdown Menu You Ever Saw

Create The Fanciest Dropdown Menu You Ever Saw

Posted on 26. Jul, 2009 by Web Design in Web Development


Good evening web designers. I hope you have all had a great weekend, and are ready to start the working week tomorrow. I have something very special to share with you today. Back in June when I wrote the post 21 Beautiful And Creative Navigation Menus, we had a comment from Brian Cray, in which he shared his menu with us. After speaking with Brian, he agreed to write a tutorial for us on how he created  his website navigation menu.

Recently he has changed his website design and the layout, but this tutorial is sweet, and one amazing navigation! Here is a bit about Brian…

About Brian…
Brian Cray writes a blog that helps web 2.0 professionals build better websites. Among other things, he is known for his development of Nearby Tweets and PXtoEM.com. Feel free to follow him on Twitter.

Be sure to check out some of the services that Brian provides, and if you have any questions for Brian feel free to drop in a comment and im sure he will reply.

What will you be building?

See the working demo

final

Contents…
  1. Making a basic dropdown menu that works
    1. The basic HTML
    2. The basic CSS
    3. The basic jQuery
  2. Making the basic menu look fancy
    1. The images
    2. The fancy HTML: What we’ve changed
    3. The fancy CSS: What we’ve added
    4. The fancy jQuery: What we’ve changed
  3. The final result with files

* * * * *

1. Making a basic dropdown that works

Web designers and developers find themselves creating dropdown menus over and over. I’ve drilled dropdown menu production to a science. Seriously. Here’s the benefits of Brian Cray’s basic dropdown menu code:

  • Can be put anywhere on site in a matter of seconds
  • Forces no styling on the menu, but adapts to ANY styling
  • Can handle multiple dropdown levels gracefully
  • Covers variable-width tabs and dropdown menus
  • Semantic – only two classes needed on an otherwise plain UL

Here’s what the basic dropdown looks like

Let’s go over my dropdown menu code first as it provides the basis for the fanciest dropdown menu you ever saw.

The basic HTML

You’ve seen this kind of thing a million times. But take notice of the two UL classes: tabs and dropdown.

[html]<ul class="tabs">
<li><a href="#">Dropdown 1</a>
<ul class="dropdown">
<li><a href="#">Menu item 1</a>
<ul class="dropdown">
<li><a href="#">Submenu item 1</a></li>
<li><a href="#">Submenu item 1</a></li>
<li><a href="#">Submenu item 1</a></li>
</ul>
</li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
<li><a href="#">Menu item 6</a></li>
</ul>
</li>
<li><a href="#">Dropdown 2</a>
<ul class="dropdown">
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
<li><a href="#">Menu item 6</a></li>
</ul>
</li>
<li><a href="#">Dropdown 3</a>
<ul class="dropdown">
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
<li><a href="#">Menu item 6</a></li>
</ul>
</li>
</ul>[/html]

The tabs class makes the first UL a horizontal tab bar. The dropdown class makes the other UL dropdown menus. Simple, right?

The basic CSS

This CSS sets and resets the necessary styles so you don’t have to worry about your menu inheriting a bunch of crap that will make the menu look unexpected.

[css]/* tabs
*************************/

ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}

ul.tabs li
{
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
float: left;
position: relative;
}

ul.tabs a
{
position: relative;
display: block;
}

/* dropdowns
*************************/

ul.dropdown
{
margin: 0;
padding: 0;
display: block;
position: absolute;
z-index: 999;
top: 100%;
width: 250px;
display: none;
left: 0;
}

ul.dropdown ul.dropdown
{
top: 0;
left: 95%;
}

ul.dropdown li
{
margin: 0;
padding: 0;
float: none;
position: relative;
list-style: none;
display: block;
}

ul.dropdown li a
{
display: block;
}[/css]

The basic jQuery

The jQuery behind this is genius. It will pick up ANY dropdown class on the page and turn it into a working dropdown menu.

[js]$(function () {
$(’.dropdown’).each(function () {
$(this).parent().eq(0).hover(function () {
$(’.dropdown:eq(0)’, this).show();
}, function () {
$(’.dropdown:eq(0)’, this).hide();
});
});
});[/js]

And that’s all you need to add to each project to create dropdown menus in a flash! Now lets take this concept a step farther and REALLY light up the show.

2. Making the basic menu look fancy

Here’s what the fancy menu looks like that we’ll create below

The first thing to do to make something fancy is to add colors and images.

The images

download

The fancy HTML: what we’ve changed

  • Wrapped everything in a #menu div
  • Added h4 elements to add another layer to the menu’s organization
  • Added a “hasmore” class to the menu items containing dropdown menus
  • Added a “last” class to the last menu item in dropdown menus
  • Added a <span> element around the main menu items

[html]<div id="menu">
<ul class="tabs">
<li><h4><a href="#">In the blog »</a></h4></li>
<li class="hasmore"><a href="#"><span>Recent</span></a>
<ul class="dropdown">
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
<li class="last"><a href="#">Menu item 6</a></li>
</ul>
</li>
<li class="hasmore"><a href="#"><span>Topics</span></a>
<ul class="dropdown">
<li><a href="#">Topic 1</a></li>
<li><a href="#">Topic 2</a></li>
<li><a href="#">Topic 3</a></li>
<li class="last"><a href="#">Topic 4</a></li>
</ul>
</li>
<li><a href="#"><span><strong><img src="images/feed-icon-14×14.png" width="14" height="14" alt="RSS"> Subscribe to RSS</strong></span></a></li>
<li><h4><a href="#">Elsewhere »</a></h4></li>
<li><a href="#"><span>About</span></a></li>
<li class="hasmore"><a href="/about/#networks"><span>Networks</span></a>
<ul class="dropdown">
<li><a href="#">Twitter</a></li>
<li><a href="#">posterous</a></li>
<li><a href="#">SpeakerSite</a></li>
<li><a href="#">LinkedIn</a></li>
<li class="last"><a href="#">See more…</a></li>
</ul>
</li>
<li><a href="#"><span>Bookmarks</span></a></li>
</ul>
</div>[/html]

The fancy CSS: what we’ve added

  • Added the * {margin:0; padding:0} simple reset hack (I know, there are better resets)
  • Styled to body
  • Removed underline from links
  • Styled the menu heavily

[css]/* hack reset (for production, use Yahoo! reset CSS)
*************************/

*
{
margin: 0;
padding: 0;
}

/* body
*************************/

body
{
font: 14px/21px Georgia, serif;
color: #370707;
background: #e3d79b url(images/mainbg.jpg) left 40px repeat-x;
}

/* links
*************************/

a:link, a:visited, a:hover, a:active
{
text-decoration: none;
}

/* inline elements
*************************/

strong
{
font-weight: bold;
}

/* menu-specifc
*************************/

#menu
{
position: fixed;
z-index: 5;
top: 0;
left: 0;
width: 100%;
height: 40px;
line-height: 40px;
background: #ffb35a url(images/topbg.gif) repeat-x;
border-bottom: 1px solid #000;
}

#menu ul
{
margin: 0 auto;
}

#menu ul li.hasmore
{
background: url(images/drophighlight.png) no-repeat center 27px;
}

#menu ul li h4
{
margin: 0;
}

#menu ul li h4 a
{
font-size: 14px;
color: #000;
font-weight: bold;
padding: 0 15px;
}

#menu ul li a
{
color: #9b2021;
padding-left: 4px;
}

#menu ul li a img
{
vertical-align: middle;
}

#menu ul li a:hover
{
background: url(images/topselectionleft.png) top left no-repeat;
}

#menu ul li a span
{
display: block;
padding: 0 15px 0 11px;
}

#menu ul li a:hover span
{
background: url(images/topselectionright.png) top right;
}

#menu ul.dropdown
{
padding: 10px;
background-image: url(images/dropdown.png);
overflow:hidden;
border-bottom: 1px solid #dc902f;
width: 290px;
}

#menu ul.dropdown li a
{
border-bottom: 1px solid #e5cd8e;
line-height: 30px;
overflow: hidden;
height: 30px;
}

#menu ul.dropdown li.last a
{
border-bottom-width: 0;
}

#menu ul.dropdown li a:hover
{
background: url(images/menuarrow.png) no-repeat left center;
}

#menu ul li h4 a:hover
{
background-image: none;
}[/css]

The fancy jQuery: what we’ve changed

  • Used the hoverIntent jQuery plugin by Brian Cherne instead of jQuery’s default hover to prevent unintended dropdown menus
  • Used the easing jQuery plugin by GSGD to add a visual effect to dropdown menu items
  • Changed the default dropdown menu show() and hide() functions to slideDown() and fadeOut() to add some pizzazz (without being annoying)
  • Preloaded the images necessary to make the menu happen

[js]$(function () {

$(’.dropdown’).each(function () {
$(this).parent().eq(0).hoverIntent({
timeout: 100,
over: function () {
var current = $(’.dropdown:eq(0)’, this);
current.slideDown(100);
},
out: function () {
var current = $(’.dropdown:eq(0)’, this);
current.fadeOut(200);
}
});
});

$(’.dropdown a’).hover(function () {
$(this).stop(true).animate({paddingLeft: ‘35px’}, {speed: 100, easing: ‘easeOutBack’});
}, function () {
$(this).stop(true).animate({paddingLeft: ‘0′}, {speed: 100, easing: ‘easeOutBounce’});
});

pic1 = new Image(310, 672);
pic1.src = "images/dropdown.png";

pic2 = new Image(4, 40);
pic2.src = "images/dropselectionleft.png";

pic3 = new Image(394, 40);
pic3.src = "images/dropselectionright.png";

});[/js]

3. The final result with files

Congratulations! You’ve walked through creating the fanciest menu ever! Here are the files this menu uses:

42 Responses to “Create The Fanciest Dropdown Menu You Ever Saw”

  1. Brian Cray

    26. Jul, 2009

    Thanks for allowing me the opportunity to write for WebDesignDev. I hope (and I’m sure) people will love it :)

    Reply to this comment
    • Len

      11. Aug, 2009

      Hi,
      The Fanciest Dropdown Menu looks great.

      But I wondered whether you could help me.
      The menu in Dreamweaver is vertical even though in the browser its horizontal.
      This makes my layout in Dreamweaver look messy.
      Is there any code I have to add to rectify this.
      Thanks very much for any advice.
      Kind Regards, Len

      Reply to this comment
  2. Maree

    27. Jul, 2009

    Thanks Brian (and WebDesignDev).

    Drop down menus are a mainstay of any serious web developer’s arsenal and most people have their own robust standard way of doing it.

    Despite this, there are still thousands of basic tutorials on how to hang them together – all doing things differently, and few nicely.

    I have not yet played with JQuery, and I must admit that was the only reason I looked at what I thought would be yet another rehash. I enjoyed reading a well written tutorial and seeing a well built base menu, that become easy to extend.

    Most of all, I am now inspired to explore JQuery further, as it no longer looks scary and new, or too complex for the low budget small business sites I do.

    Reply to this comment
    • Andy

      27. Jul, 2009

      Jquery is very easy. Just a few lines of code. I always go shopping on their website for my effects, and modify the code for what i want it to do. :)

      Reply to this comment
  3. Legacy

    27. Jul, 2009

    i’m new to jquery but love how i’ve redesigned my site using it for horizontal display. this tut is glorious and easy to understand as well as tweek for my client’s design wishes. good stuff…keep it up.

    =^,^=

    Reply to this comment
  4. vasu

    27. Jul, 2009

    nice tuts after long time. thanks

    Reply to this comment
  5. dlv

    27. Jul, 2009

    this is really nice!! smooth effects and easy to implement … cool, congrats!
    thanks for share

    Reply to this comment
  6. SliceMachine

    27. Jul, 2009

    Really great…thanks

    Reply to this comment
  7. Dec

    27. Jul, 2009

    Nice, I may have to nick this :)

    Though it would’ve been nice to have the JS seperate from the plugin files.

    Reply to this comment
  8. Dicky

    27. Jul, 2009

    This tutorial is easy to follow, and i like the smooth animation when you scroll over the links. Thanks!

    Reply to this comment
  9. Xavier

    27. Jul, 2009

    Thanks Brian for this article. The result is amazing!

    Reply to this comment
  10. Oliver

    27. Jul, 2009

    A great tutorial and easy to follow. I’ve never really tried drop down menus on my sites but this tutorial will help a lot. Thanks.

    Reply to this comment
  11. Luke

    27. Jul, 2009

    I’m a huge fan of jQuery and always wondered about the programming of the drop downs on your site ever since I saw your blog Brian. Thanks for the nice tutorial. I definitely picked up some really great tips for my next drop down menu.

    Reply to this comment
  12. Hezi

    27. Jul, 2009

    ROCK-N-ROLL!!!!

    Reply to this comment
  13. Paulo

    27. Jul, 2009

    Great article!

    One thing to watch out for is this solution requires javascript to open the sub-menus. Ideally we would want to update it to use pure CSS drop-downs (a la Sons of Suckerfish ) while adding the cool affects to those with javascript enabled. Sort of how the Superfish plugin does it

    Reply to this comment
  14. Andy

    28. Jul, 2009

    Agree with Paulo – plus, the drop downs should open on a:focus in the CSS too, at the moment it only works on hover, making it keyboard-inaccessible.

    Reply to this comment
  15. Brian Cray

    28. Jul, 2009

    Andy: Good point on the a:focus – never thought of that before!

    Reply to this comment
  16. mary

    28. Jul, 2009

    Nice one, look forward to giving it a try. Thanks Brian, excellent work

    Reply to this comment
  17. Heru

    01. Aug, 2009

    Nice…… :)

    Reply to this comment
  18. Moksha Solutions

    08. Aug, 2009

    I was looking for a menu tutorial. I hope it solve my problem, it look Simple and Great. thanks ;)

    Reply to this comment
  19. web

    09. Aug, 2009

    this really helped on my site

    Reply to this comment
  20. stian

    18. Aug, 2009

    Ey! I loved this tutorial, but I kind of have a problem. I cant link some of the “buttons”, and I changed the pics and the “dropdown” pic wont show..
    could anyone help me? :D

    Reply to this comment
  21. Cory

    19. Aug, 2009

    ahhhh shoot me now not that damn reset.

    * { margin: 0; padding: 0; }

    That has to be the worst line of CSS ever.

    Reply to this comment
  22. Gus

    30. Aug, 2009

    This menu was a godsend after I struggled for a week trying other similar ones. But I still have one issue:

    In restyling the css for my needs, I’ve somehow affected one selector that now causes IE6 to display headings much larger than the intended size. There’s no problem with FireFox browsers at all.

    I should mention that all of the dropdown headings are fine on both browsers. It’s only the main headings that render far too large in IE.

    If someone has encountered this and can suggest where I’d look for a remedy, I’m entirely grateful.

    Reply to this comment
  23. Gus

    09. Sep, 2009

    Ten days have gone by, but nobody’s responded to the post above. If it’s because the problem is a bit bewildering, then let me try to offer more information:

    This could be relevent: I always set my body’s font size to 62.5% for reasons I think everyone knows. Accordingly, all fonts seem to work just fine at approximately 1em — or whatever.

    I note that the demo for this script displays typefaces the same in IE as they do in Firefox. But I’ve modified my css a bit, mostly removing unused selectors.

    Could it be that I’ve changed a selector that’s critical to maintaining the font size in IE? To compensate for the larger font now displayed in IE, I’ve tried a few CSS hacks. This works, of course, but it also creates a different problem: Applying essentially two different font sizes within the container now wreaks havoc with the container’s height and placement.

    Help! I’d sure appreciate a few thoughts from anyone who might be able to shed some light.

    Reply to this comment
  24. Mike

    30. Sep, 2009

    Anybody run into a conflict with other jquery plugins on the same page? Dropdown functionality is lost when I add jquery cycle to the page…thank you.

    Reply to this comment
  25. My Webmaster Tips

    09. Oct, 2009

    Great article and explanation of the basic menu and with the added abilities of the menu. I think this might be the menu I end up going with thanks to your very well written instructions for use.

    Reply to this comment
  26. plumpnation

    16. Oct, 2009

    Yeah, I’ve run into not only other jQuery script conflicts that stop the dropdowns working, but also things like lightbox and lightwindow. I’m getting a z-index issue in ie6 too, but that’s probably just something buried in my CSS.

    Reply to this comment
  27. gkiller

    28. Oct, 2009

    Great tutorial. However, the drop-down menus fall behind other elements in the page when running in IE 7. The z-index is set to 999 for the .dropdown in your CSS and I tried various values for the z-index on each element – still the same behavior.

    We have a jQuery news slider that appears below it and the drop menus fall behind the content. We replaced it with a simple div containing a background image – still the same result.

    Any ideas or suggestions?

    Reply to this comment
  28. gkiller

    29. Oct, 2009

    If you look at the demo in IE 7, the menu aligns to the left as opposed to the center in Firefox and Safari. There are also slight positioning differences in IE as compared to Firefox if you start to modify the styles.

    Reply to this comment
  29. Tomislav

    05. Nov, 2009

    You dude win! :)

    thanks for the tut.

    Reply to this comment
  30. Rahul Rajbhoj

    20. Nov, 2009

    I like it dude…………………

    very cool drop down it is………..

    thnxs for sharing with us………………..keep it up.

    Reply to this comment
  31. Spiro K.

    02. Dec, 2009

    Can you please check the menu functioning when you make the drop down go slower ex. 600) and when you fast move the mouse out and back over the drop down it self!

    Reply to this comment
  32. lisa

    05. Dec, 2009

    Great tutorial, to bad the line from the jQuery JavaScript Library v1.3.2 makes this not to work with mootools 1.11

    There are some other great jquery dropdown menus that do work with mootools and jquery :) and are less than 2kb while this one is 45kb.

    Thank you for sharing the code

    Reply to this comment
  33. Ashley

    14. Dec, 2009

    I love this! Thank you so much for sharing, and providing a great tutorial!

    Reply to this comment
  34. Ramsey

    16. Dec, 2009

    I too love this dropdown but agree with some of the others. Ideally it should downgrade to a CSS only dropdown, something similar to Suckerfish or Son of Suckerfish.

    Reply to this comment
  35. [...] A top tutorial here posted on our blog and written by Brian Cray. This menu is simply fantastic and is an easy tutorial to follow that’s broken up into many different steps for beginners and advanced web designers. Read More [...]

    Reply to this comment
  36. Gus

    29. Dec, 2009

    I’ve think I’ve tried everything under the sun to reduce line spacing for drop-down menu items. Unless I’m mistaken, no CSS selector seems to have the power to affect the spacing, and this is disappointing for designers who might not want to dedicate the entire space occupied by long drop-down items.

    To compensate, I tried adding transparency to a background in the #menu ul.dropdown selector so that when drop-downs overlap page content, the content remains partially visible. Unfortunately there seems to be a bug in the script since transparency is provided on the initial page load but ignored on subsequent hovers.

    Aside from these hurdles, this is a lovely menu with lots of flexibility. Still I appreciate any help I might get in solving my own small dilemmas.

    Reply to this comment
  37. Jaka

    08. Jan, 2010

    thans

    Reply to this comment
  38. Stazh

    20. Jan, 2010

    Great work! Thanks a lot!

    Reply to this comment
  39. Elijah

    25. Jan, 2010

    Thanks ! good Job

    Reply to this comment
  40. Wow and wow I loved the new fanciest drop down menu a lot and now I am going to use this technique in my site and then post it in a contest running by grafikguru.com and I am sure I would win the prize.

    Reply to this comment

Leave a Reply