Home >> Web Development >> Create The Fanciest Dropdown Menu You Ever Saw
Create The Fanciest Dropdown Menu You Ever Saw

Create The Fanciest Dropdown Menu You Ever Saw

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. Before I begin, I want to remind you of a free website builder called Wix, using which you can create beautiful, professional websites. Now let’s continue…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

Before I begin – for those of you who want an easy way out of this tutorial, you can create a free  flash website with Wix that will look like a very professional website. Now for those who are still interested in going through with the tutorial, I will continue. 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! By the way, if you feel frustrated with designing, or just want an easy way out, you can always create a free professional website with Wix.

Here are the files this menu uses:

Ultimate Designer Toolkit

About Iggy Ko

I am the owner and main person behind WebDesignDev. I blog about all kinds of web design topics.

154 comments

  1. Brian Cray

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

    • Len

      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

  2. Maree

    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.

    • Andy

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

  3. Legacy

    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.

    =^,^=

  4. vasu

    nice tuts after long time. thanks

  5. dlv

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

  6. SliceMachine

    Really great…thanks

  7. Dec

    Nice, I may have to nick this :)

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

  8. Dicky

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

  9. Xavier

    Thanks Brian for this article. The result is amazing!

  10. Luke

    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.

  11. Hezi

    ROCK-N-ROLL!!!!

  12. Oliver

    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.

  13. Paulo

    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

  14. Andy

    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.

  15. Brian Cray

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

  16. mary

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

  17. Heru

    Nice…… :)

  18. Moksha Solutions

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

  19. web

    this really helped on my site

  20. stian

    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

  21. Cory

    ahhhh shoot me now not that damn reset.

    * { margin: 0; padding: 0; }

    That has to be the worst line of CSS ever.

  22. Gus

    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.

  23. Gus

    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.

  24. Mike

    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.

  25. My Webmaster Tips

    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.

  26. plumpnation

    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.

  27. gkiller

    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?

  28. gkiller

    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.

  29. Tomislav

    You dude win! :)

    thanks for the tut.

  30. Rahul Rajbhoj

    I like it dude…………………

    very cool drop down it is………..

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

  31. Spiro K.

    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!

  32. lisa

    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

  33. Ashley

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

  34. Ramsey

    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.

  35. Gus

    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.

  36. Jaka

    thans

  37. Stazh

    Great work! Thanks a lot!

  38. Elijah

    Thanks ! good Job

  39. Best Web Designing Contest

    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.

  40. Greg

    Great work, really like it! I notice that in IE7 (at least) the active tab background image is “cut off” directly above the text… any CSS gurus out there have a fix for this? Excellent menu though, well done!

  41. Dave

    Does anyone know how I can add a second dropdown sub-menu to this?

    For instance if you look at the screenshot of the menu at the top of the page, I would like to have another dropdown sub-menu to pop out when I scroll over Topic 1, Topic 2 etc.

    Here is the code I tried to add the sub-menu…

    Topic 1 »

    Topic 1.1

    Topic 1.1.1
    Topic 1.1.2
    Topic 1.1.3
    Topic 1.1.4

    Topic 2
    Topic 3

    The sub-menu (topic 1.1.1, 1.1.2, 1.1.3, 1.1.4) would pop up when I hover over topic 1.1 as it should BUT it is contained inside the original dropdown. In other words when I would hover over topic 1.1 the dropdown would show on like the last 40 pixels or so of the right side of the original dropdown. It would not dropdown to its own container.

    Does anyone have any ideas on how to help with this? If anyone needs more info or cant understand what im saying, let me know and ill try to describe it better.

    Thanks a lot, I really appreciate it!

  42. Dave

    Forget that question..it was an easy fix, just had to take out the overflow: hidden rule in the #menu ul.dropdown

    Thanks, this looks great! Very much appreciate it!

  43. Ronnie v

    Hey just built a site using this, was testing it works great in Safari, but in Firefox does not work unless Javascript is enabled, which most common people wont even change default settings in their browsers… So what can i do to make sure they get some type of menu if they have Javascript disabled?

  44. Ian F

    Thanks for the tutorial, I’d like to implement it, but I’m having a problem.

    I’d like to separate out the jquery library and have it in its own file to fancydropdown.js. But whenever i try this, the dropdown stops working. This is when I’m even using the same jquery version 1.3.2 as is included in the original js.

    Anyone know how to solve this?

  45. Steve

    This menu looks awesome!

    I made a change in the css so that when a user is in the drop down menu the “Over State” of main navigation does not disappear.

    I replaced the css:

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

    With:

    #menu ul li:hover {
    background-image:url(../images/backgrounds/nav-hit.gif);
    background-repeat:repeat-x;
    color:#193b65;
    }

    #menu ul li:hover a {
    color:#193b65;
    }

    Of course you can change your background image as needed.

    Keep up the good work.

  46. canaris

    Why this script block any jquery gallery?
    Whats the solution?
    I cant find the problem line

    When I delete the .js script all image gallerys works fine.

    • panikkos

      the fancydropdown.js file contains the code of the jquery-1.3.2.min.js file. just split the code and import the two files individually

      • verti

        Same issue here. Impossible to use fancydropdown with any other type of lightbox.

        I did identify the jquery 1.3.2 from fancydropdown.js, and isolated it in a separate js to call him indivually, or to call an other recent jquery instead but the dropdown stop working.

        Any other clues guys?

        Cheers.

  47. core webdesign

    very very nice…

    • Clocks

      I couldn’t agree more. Awesome tutorial! I’ve been struggling trying to get a decent CSS menu for a long time but your article nailed it.

      Time to implement!
      Thanks again.

  48. chris

    this menu is SEXY as hell – BUT when i add it to my site it doesnt play nice with jquery cycle plugin…any suggestions?

    it breaks the cycle script…if i take out the

    then the slideshow plays as normal…

  49. Postman

    great menu, but dropdown wont work in google chrome, opera or safari

    it works fine in IE and firefox

    anyone knows what makes problems with that 3 browsers?

  50. Sankalp

    thats kool
    i liked it …
    nice…

  51. datshay

    Cool stufffs…

  52. annika

    very nice menu but it won’t work with a slider in jquery.
    Do you have any suggestions to fix that?

  53. Manali

    great menu, but dropdown wont work in google chrome, opera or safari

    it works fine in IE and firefox

  54. JV

    Very nice, it worked well with Firefox.

    But it didn’t work with IE (my version is IE 7). It was doing the “dropping down” animation when the mouse hovers on the menu, but when the mouse pointer attempts to move over the “dropped down” submenus, the ‘dropped down’ submenus quickly disappear, rendering them useless.

    Anyone knows where the problem might be at? The code? or the jQuery, or the JavaScript?

    • JV

      Nevermind, solved it. (you may delete my comments, thanks)

      • Greg

        How do you solve the ie7 issue?

  55. PHP Developer India

    putting minor change over color it will suit to my site. Thanks for sharing…

  56. WebDesign63

    Great Tutorial.

  57. Art4

    Wow, great Tutorial :-D
    Thank you

  58. Ecommerce Web Designer

    Nice tutorial, be interesting to see how this is solved in safari.

  59. Emergency Lighting

    Great tutorial, might use this in our new website

  60. Anagh

    It prevents lightbox from working correctly. :-(
    the fancydropdown.js affects the working of lightbox.js.

  61. plaid

    Not working in internet explore 7. any way to fix. Let me know!

  62. Phil Owen

    Mine works fine in Chrome and IE7, but not IE6.

    I get the menu bg, but no menu items..

    PLEASE FIX…. =/

  63. Michael

    can you add an example of nested list to the HTML menu example?

  64. ntagas webdesign

    Thank you really nice Tutorial. It helps me in my work.

  65. mad2312

    hi there,
    the menu is real nice but i have a problem when i want more levels.
    First level is ok but for the second level i can only see part of the menu. i have the first letter of the text. I t hink it’s a problem with the css but i don’t know how to modify it.
    can anyone help plzzzzzzzz!!!!!

  66. Walmik Deshpande

    Thanks so much! Saved a couple of hours of fighting :P

  67. Phillip

    Thanks for a great tutorial! It’s exactly the effect I was looking for.

    May I offer a suggestion? Save the script as its own fancymenu.js file instead of packaging it with jquery and the other plugins. I’m using a newer version of jquery and didn’t want to include it twice.

    Might the grouped packaging be causing the plugin conflicts, where some users found the menu doesn’t work with other jquery plugins?

    I was able to copy the JS from this tutorial into a separate file ,but the code needed tweaking since it contains nonstandard single- and double- quotes. (for example, left quote ‘ and right quote ’ have to be changed to straight quote ‘ )

    But after that simple tweak it looks and works great. Thanks!

    • Sam

      Could you detail where these quotes show up please?

      As since adding Pine Notify to my site, fancy dropdown no longer works.

    • Sam

      Don’t worry Phillip, I have found the problem.

  68. DavidYell

    Implemented this on a site and in IE7 the menu drops down behind the items below it, I’ve updated the z-indexing and I still can’t get it to dropdown over the content below it, which is kind of a big flaw for me.

  69. dave

    Im a bit confused here. I have tested the html code in Microsoft Expression web, and it looks fine, but when I transfer it all to the hosting site, I get only the code displayed. I have also moved the css and js files, and am unsure what Im missing.

  70. Cheap Brochure Guy

    Great tool. I’m going to add one to my blog.

  71. JoeMD

    I’m confused, where are we supposed to put all of this code?

  72. Sam

    FIX ERRORS WITH ADDITIONAL PLUGINS:

    In fancydropdown.js -
    - Delete: jquery 1.3.2 code (top of page until comments about Sizzle Selector Engine)
    - Remove: Sizzle CSS Selector code (comment shows beginning of code, BUT do not delete jquery easing. This was not commented to show the beginning of this code, there was just a line break. The code starts like…jQuery.easing['jswing']=jQuery.easing['swing']…. do not delete this or anything below it)

    Then you should be right to go!

    • Tim

      Thanks for that, worked great! Any idea how to get it working in IE7? I’m having the same problem as a few others, the menu is showing behind other elements even after setting the z-index higher.

  73. WecodeYoursite

    Wow adding related icons gives more attractive and user friendliness. I’m gonna try this today. thanks

  74. xristos bbus

    hello there..the menu is great, but it doesn’t work at all in my first page, where I have installed the front page slideshow provided by joomla.Is there anything I can do, so that it works?

    also it didn’t work in the pages I loaded lightbox.js (this is not so serious, I used highslide which doesn’t affect the fancydropdown menu)

    thanx!

  75. lucu

    waw… i very need this tutorial.. thanks… i will make it for my blogs… thanks you admin

  76. nikt

    @Sam

    Could You clarify ?

    After removing Sizzle code , menubar is no longer functional.

  77. Lamprocles

    Hi, excellent tutorial.
    This works perfectly for me when I upload it within a basic HTML page. But… when I place it in a header.php and call it from another .php file there are a few issues. For example, the top menu links are not centered, and a few image issues as well.
    Probably something simple I forgot like moving the decimal point, but any help would be appreciated!

  78. Saurabh Gupta

    Thanks..!! Nice work…

  79. John Cunningham

    The menu looks fantastic, but I’m having some trouble positioning it using Dreamweaver cs3. Regardless of how I style it, it wants to remain at the top of the page. I’m pretty new with Dreamweaver. Any suggestions would be appreciated. Thanks in advance!

  80. Santiago

    The menu is awesome, it looks great on my site.
    The thing’s I’ve it installed with WordPress, and I have a plugin (Google Calendar Events) which is having conflicts with this.

    The weird thing’s that when I tested it with jQuery 1.5 in a file on my server, it works fine. When I activate the plugin and remove the code calling jQuery 1.5 from my site (because the plugin calls jquery 1.4.4) it doesn’t work.

    I’ve tried a lot of things, and actually I have the dropdown in a different file than jQuery which I call from a .js file on my header.

    How should I fix it?

    Thanks,

  81. Saurabh Gupta

    NIce work..!! Thanks a lot..

  82. Bull Dog

    When I comment out the hard coded jquery source and use the latest version…there is no drop down.

    All I have done is is commented out that single line of hardcoded jquery and made sure the jquery plugin was included in my master page.

    Any ideas as to why the dropdown may not be working?

  83. tsapos

    although both jquery js, as many people mentioned in the comments above, lightbox doesnt work which makes the menu pretty but useless nevertheless. It is very often lightbox is used this days. So I dont know if the writer can suggest sth.

  84. Web Design Agency India

    very nice menu but it won’t work with a slider in query.
    Do you have any suggestions to fix that

  85. Web Design Agency India

    This works perfectly for me when I upload it within a basic HTML page. But… when I place it in a header.php and call it from another .php file there are a few issues. For example, the top menu links are not centered, and a few image issues as well.
    Probably something simple I forgot like moving the decimal point, but any help would be appreciated!

  86. Flyer

    Very good tool, thanks for that.
    Very cool ;-) It helps me in my work!

  87. Diät Rezepte

    great menu, but dropdown wont work in google chrome, opera or safari it works fine in IE and firefox . anyone knows what makes problems with that 3 browsers?

  88. Deadra Dalmata

    As I website owner I believe the content here is very superb, thank you for your efforts.

  89. Domen

    Thank you for your efforts. Really GREAT tutorial.

    I have only one question. Is there any way to make drop down scroll up?

  90. Steven Nash

    This is a beautiful menu effect, but unfortunately it doesn’t work with the most recent version of jQuery (1.5 as I write this). I’ll take a look at it and see if I can get it working. Hopefully it can be resolved because it’s a really wonderful effect.

  91. Geschenkideen

    Gute Infos, kann man gebrauchen. Konnte viel erfahren. Weiter so.

  92. sudath

    that’s very nice menu, great job.,

  93. Tanja

    Thank you very much – its very nice

  94. Flyer

    Great tutorial, thanks a lot.
    I wil use this menu in my new website.

  95. Gea

    I need some help!
    I used this dropdown menu but I added a video underneath the menu and then the dropdowns disappear under the video.
    How can I solve this? I tried z-index, but it doesn’t help.

    Thanx

  96. Bryan Snuffer

    I am trying to add this menu into an existing table on an existing page. The menu just gets jammed to the top and wrecks the rest of the page contents. What am I doing wrong?

  97. Chris

    Hi, Its a great menu. I was wondering how it might be possible to make the menu title hover image remain when the drop down is displayed. Currently it only displays when you hover over the title. When you move the cursor onto the drop down, the title is no longer hi-lighted.

    Also, I’m concerned about the compatibility with safari, chrome etc. Does anyone here know how to fix those problems?

    • Jim

      I am also interested in the hover. I am working on it now.

  98. conquerer_ni

    Thank for the great tutorial.

    But it doesn’t seem to be working in IE 7.
    Can anybody please help me fix the issue or help me move in the right direction to get it fixed?

    I have installed debugbar and that doesn’t seems to even recognize the javasciprt file.

  99. tuck

    Very Nice. But when I take the div id=menu and put that in a table cell. The image that display when the mouse hover over the links, does not align to the top of the table cell. Any figure out why is that?

  100. website design

    thank you for yet again another great tutorial

  101. afors

    very nice tutorial.

  102. Manju

    Thanks for great tutorial

  103. Joe Bloggs

    Nice, but what if you don’t want the menu at the very top of your website? Seems a bit inflexible.

  104. Joe Bloggs

    Ignore my previous comment, I just removed position:fixed and was able to place it anywhere.

  105. manish singh

    this is really awesome

  106. Greg

    Works nicely for me on ie7 except that nested drop downs are a bit of a pain. When one moves one’s mouse from drop down level to nested drop down level the nested drop down level disappears too easily so that selecting an element in the nested drop down level is very difficult. Any workarounds for this?

  107. Website translator

    The menu looks great, I will have to try it out even if some of the comments indicate that there might be potential problems with it.

  108. baby

    thank you for the tutorials i think going to learn about website creation from you from now on

  109. Allan

    Why does this script popup an active X warning? Is there anyway to get rid of that. Is that because of the settings on my browser? Will many people also have that problem? Thanks.

  110. Shruti

    Hello I am making a site for a non profit organisation, just wanted to know if I can use the code u have given as is or even after me modifying it to fit in my needs.

    Awaiting your response.

    • Web Design

      Hi Shruti,

      Feel free to modify it as you need : )

  111. Jonas

    Doesn´t work.
    Subitem 1:3 apperas outside Imtem 3:1 to the right on FIREFOX when “moving the mouse slowly” on the drop down 1:2

  112. Sarah

    Lovely! But I ran into something bizarre.
    IE (naturally) on 7 and 8, the drop downs don’t want to function when there is a .swf embedded on the page (using tag generated by Flash publish settings).

  113. College advice

    The magics in the CSS! Thanks guys

  114. Cody

    Same problem. This does not work with my jquery content slider. Drop down functionality quits. Solutions?? Desperate here…

  115. Sponsor a Child

    Excellent resource. Thank you!

  116. vinodh

    Hi,
    thank you for this. I am a serverside programmer.
    stuck with menu in jquery. Your tutorial solved my problem.
    regards
    vinodh

  117. deea

    How could I use the symbol of that showing hand if I have only html/css on the website and a horizontal submenu, where and how should I put that photo ? Thank you.

  118. Scotty G

    Will this make submenus open to the left if you are against the right side of the screen???

  119. Sarah

    Hi, all! Does anyone know if this menu will function nicely on a Blackberry device?

  120. Sarah

    Hi, me again!

    I noticed on mobile (specifically iPhone) that the menus will not close once they are open. Even if you click outside the menu or click back on the top-level item — they stay open!

    Does anyone know of a workaround on this?

    Sarah

  121. boshra

    hi webdesgindev
    do you know that i really love you?
    i guess i read your site times a day. you r amazing. I send lots of positive energy for you each time i read your articles.
    tnxxxxxxxx

    • Web Design

      Thank you, Boshra :)

  122. hd desktop wallpapers

    Hi there, this is really good tutorial for drop down. thanks for sharing it.

  123. Webdesign Twente

    thanks for sharing this with us ! keep up the good work :)

  124. microsilic

    great works and thanks

  125. John Kortis

    Nice Menu, whenI move the css to it’s own subdir, it stops working

  126. mohit

    very nice dropdown & nice ezeye tutorial Thanks

  127. Pg1creative

    Great tut! It has helped me out of a hole.

    I do have a couple of questions though.

    I have found a way to align the drop down text to the left of the drop down box by adding {text-align: left} to the CSS but on hover over the text jumps to the middle. Any ideas how to stop this from happening?

    Also I need the menu to align to the right of my site. This means on some screens the drop down goes off the screen. Is there a way to move the drop down to the left of the main link rather than the right?

    Cheers

  128. Jacqueline Green

    Hi there!

    I am having a hard time because I am using the slidesJS on the same page as this dropdown menu and so far, it will only give me one or the other, depending on how I have my external links listed. Is there anything that I can do about it? Here is a link to a discussion I started that has all my coding and everything! Thanks so much in advance to your help!

    —> https://groups.google.com/forum/?fromgroups=#!topic/slidesjs/B6PTFRWYDyw

    ps. I love this dropdown menu. ::)

  129. Breanna

    Hmm, it didn’t work for me. -sad face-

  130. Danielle

    Being fairly new to Javascript…..any idea why this wouldn’t be working in IE8?

  131. Ali

    Very nice menu. Thanks for tutorial.

  132. vikas

    Thankyou…very much..:)

  133. Women Abayas

    Thanks for this great list, These are my all time favorites. 

  134. Michael

    this works great, and I’ve been able to tweak it with CSS, but when I try to separate the jQuery1.3.4 from the other code, it doesn’t seem to work. Can you get it to play nice with jQuery 1.9?

  135. Web telorDesign

    Good tutorial! Sarah asked:

    “I noticed on mobile (specifically iPhone) that the menus will not close once they are open. Even if you click outside the menu or click back on the top-level item — they stay open!”

    I have the same problem, any solution?

    Thank you,

  136. Rasmus

    I was wondering the jQuery cod, i have never used it before and i don’t know, where to add it? In the HTML? Css? or a new?

  137. Estelle Brownell

    Hello! I’ve been reading your website for some time now and finally got the courage to go ahead and give you a shout out from Lubbock Texas! Just wanted to say keep up the good job!

  1. Pingback: 50 Best Web Design Blog Posts In 2009 | Web Design Tutorials | Creating a Website | Learn Adobe Flash, Photoshop and Dreamweaver

  2. Pingback: Best Photoshop, html, javascript and php tutorials » Creating The Fanciest Dropdown Menu You Ever Saw

  3. Pingback: 38 jQuery And CSS Drop Down Multi Level Menu Solutions

  4. Pingback: Best jQuery and CSS multi level & Mega drop down menus - Wsblogz.com – Web design magazine

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Create The Fanciest Dropdown Menu You Ever Saw