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?
Contents…
* * * * *
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
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:
- fancydropdown.js – combines jQuery, easing plugin, hoverIntent plugin, and fancy dropdown menu code
- fancydropdown.css – combines dropdown menu styling and fancy menu styling
- fancydropdown.html – the HTML of the fancy menu
- fancydropdownimages.zip – all of the images used to create the fancy menu
- fancydropdown.zip – all of the files used to create the fancy menu
READY TO TAKE WEB DESIGN SERIOUSLY?
Today, I am giving away Web Design Riches, the ultimate guide on how to run a profitable web design business. Enter your name and email below to get instant access.
core webdesign (1 year ago)
very very nice…
Clocks (10 months ago)
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.
chris (1 year ago)
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…
Postman (1 year ago)
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?
Sankalp (1 year ago)
thats kool
i liked it …
nice…
datshay (1 year ago)
Cool stufffs…
annika (1 year ago)
very nice menu but it won’t work with a slider in jquery.
Do you have any suggestions to fix that?
Manali (1 year ago)
great menu, but dropdown wont work in google chrome, opera or safari
it works fine in IE and firefox
JV (1 year ago)
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 (1 year ago)
Nevermind, solved it. (you may delete my comments, thanks)
Greg (1 year ago)
How do you solve the ie7 issue?
PHP Developer India (1 year ago)
putting minor change over color it will suit to my site. Thanks for sharing…
WebDesign63 (1 year ago)
Great Tutorial.
Art4 (1 year ago)
Wow, great Tutorial
Thank you
Ecommerce Web Designer (1 year ago)
Nice tutorial, be interesting to see how this is solved in safari.
Emergency Lighting (1 year ago)
Great tutorial, might use this in our new website
Anagh (1 year ago)
It prevents lightbox from working correctly.
the fancydropdown.js affects the working of lightbox.js.
plaid (1 year ago)
Not working in internet explore 7. any way to fix. Let me know!
Phil Owen (1 year ago)
Mine works fine in Chrome and IE7, but not IE6.
I get the menu bg, but no menu items..
PLEASE FIX…. =/
Michael (1 year ago)
can you add an example of nested list to the HTML menu example?
ntagas webdesign (1 year ago)
Thank you really nice Tutorial. It helps me in my work.
mad2312 (1 year ago)
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!!!!!
Walmik Deshpande (1 year ago)
Thanks so much! Saved a couple of hours of fighting
Phillip (1 year ago)
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 (1 year ago)
Could you detail where these quotes show up please?
As since adding Pine Notify to my site, fancy dropdown no longer works.
Sam (1 year ago)
Don’t worry Phillip, I have found the problem.
DavidYell (1 year ago)
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.
dave (1 year ago)
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.
Cheap Brochure Guy (1 year ago)
Great tool. I’m going to add one to my blog.
JoeMD (1 year ago)
I’m confused, where are we supposed to put all of this code?
Sam (1 year ago)
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 (1 year ago)
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.
WecodeYoursite (1 year ago)
Wow adding related icons gives more attractive and user friendliness. I’m gonna try this today. thanks
xristos bbus (1 year ago)
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!
lucu (1 year ago)
waw… i very need this tutorial.. thanks… i will make it for my blogs… thanks you admin
nikt (1 year ago)
@Sam
Could You clarify ?
After removing Sizzle code , menubar is no longer functional.
Lamprocles (1 year ago)
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!
Saurabh Gupta (1 year ago)
Thanks..!! Nice work…
John Cunningham (1 year ago)
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!
Santiago (1 year ago)
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,
Saurabh Gupta (1 year ago)
NIce work..!! Thanks a lot..
Bull Dog (1 year ago)
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?
tsapos (1 year ago)
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.
Web Design Agency India (1 year ago)
very nice menu but it won’t work with a slider in query.
Do you have any suggestions to fix that
Web Design Agency India (1 year ago)
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!
Flyer (1 year ago)
Very good tool, thanks for that.
It helps me in my work!
Very cool
Diät Rezepte (1 year ago)
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?
Deadra Dalmata (1 year ago)
As I website owner I believe the content here is very superb, thank you for your efforts.
Domen (1 year ago)
Thank you for your efforts. Really GREAT tutorial.
I have only one question. Is there any way to make drop down scroll up?
Steven Nash (1 year ago)
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.
Geschenkideen (1 year ago)
Gute Infos, kann man gebrauchen. Konnte viel erfahren. Weiter so.
sudath (1 year ago)
that’s very nice menu, great job.,
Tanja (11 months ago)
Thank you very much – its very nice
Flyer (10 months ago)
Great tutorial, thanks a lot.
I wil use this menu in my new website.
Gea (10 months ago)
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
Bryan Snuffer (10 months ago)
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?