Tutorial Details
- Difficulty: Intermediate
- Estimated Completion Time: 60 Minutes
- Technologies: HTML, CSS3, jQuery
Perhaps more than any other topic, I’m most often contacted about how to build cross-browser navigation menus. Understandably, the reason is because every web designer has built one at some point, if not during every project! Nonetheless, it can absolutely be a tricky task. In this video tutorial, I’ll teach you how to build an attractive cross-browser navigation menu; notable features include CSS3 gradients, multiple sub-menus, and jQuery animations.
Other Viewing Options
Write a Plus Tutorial
Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.
Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $14.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Wow….its great tutorial :)
Great tutorial! :P I was going over your lava lamp tut and I was wondering how would I be able to add the lava effect to this drop menu or vica versa. Ive tried everything but cant seem to make the drop-downs follow the buttons I hover over.
Any help would be appreciated. Thanx
Just a quick observation: I have downloaded the source files several times: the css style sheet is cut off at line 93…
Would it be possible to update it with a complete version?
Thank you so much!
-Franco
How can i make the navigation bar hight lower, its too high for my web site design.
Thanks!
Amazing tut, I spend nearly 2 hours absorbing every detail. An ‘aha moment’ for me in terms of css positioning. Can’t thank you enough
damn…i’m speechless…:(
Hey Jeffrey,
First off, I really enjoy your tutorials. You have a great teaching style that makes it easy to learn, from novice to advanced.
Secondly, regarding this tutorial … I am having a real tough time figuring out what to do to get this flicker to go away. I use the .stop(true, true).slideDown(); and .stop(true, true).fadeOut(); inside my hover functions. And when you move your mouse off a submenu and back on it will flicker 5 or 6 times then fadeOut() regardless if you still have your mouse on the menu or not.
What I would like is if i hover back over the menu before it fades out, for it to stop the animation and reverse itself back to 100% faded in without registering the slideDown/fadeOut flicker.
If you need my code I can provide.
Thanks,
Scott
Hey Scott – Do you have a link to a preview on something like jsbin.com?
Sorry Jeffrey, didn’t see this until today. I figured the site would e-mail me if I got a reply. Guess not, haha.
Anyhow, I went to jsbin.com and sort of pieced together a template that shows what I’m speaking of with one exception: In my project I’m using 1.4.1 due to the fact that 1.4.2 does not have a -vsdoc yet for VS2008 intellisense. Jsbin.com skips 1.4.1 by only having 1.4.0 and 1.4.2 so in my template I have 1.4.2. However, the effect stills occurs when you hover off and back on a submenu real fast several times.
Live Example:
http://jsbin.com/esaco3
Just thought I’d fix some formatting to make things a tad easier to read: http://jsbin.com/esaco3/5.
Sorry, one more revision. I thought I’d put some comments in the javascript to give you some insight as to what I was doing:
http://jsbin.com/esaco3/6
HI, i would like to make the top tier link to stay active when i select it or any of the sub links.
If anyone can help it would be great. I separated the top and subs with classes.
I am sure all i need is to target the class, but i am not sure what line of code i need to add.
Any help would be appreciated.
Thanks for the tutorial btw :)
Any way to do this multi level menu to a Sprites nav?
I am so frustrated :-(
Dallas
Hi Jeffrey, could you please answer my question?
Thanks for Smooth Navigation Menu …
This was a really great tutorial, first video from Jeff that I’ve watched and it was superb – I learned a lot, thanks!
Question:
I extended the bar to fit right across the screen by setting the width of #nav to 100%, but this leaves me with the nav buttons on the left and the rest of the screen taken up by the ‘bar’, as expected.
Question is, how do I set the nav buttons (the ul list) to be centered on the bar?
Thanks if anyone can help.
nice thanks.
Does not work in ie6 when javascript is disabled
Hello. I need a bit of help. When working in dreamweaver and linking a subnav list item to a page, it creates css that overrides the existing style for my nav. The result is lost styling on li that I want to link to a page. How can I avoid this and still link to pages without loosing styling?
Hi Jeffrey, thanks a lot for another great tutorial. I took a similar tutorial from soh-tanaka at one point, but he did things differently than you as I can recall. This approach was very insightful for me.
As with most jquery tutorials I take, I experiment with some of the code to try different things, and so I changed the slide effect to fadeIn and fadeOut.
When I did this and rolled over the bottom li in the initial drop down, it would fade in and then quickly out, the submenu that was hidden.
Everything would still work fine, just that that would happen when hitting the bottom list item. I found it odd to say the least. Any ideas?
hey would this go well with the lava lamp tutorial, like have the lavalamp going but when you scroll over make it pop down into the navigation?
Something strange happens with the demo menu [http://nettuts.s3.amazonaws.com/590_menu/menu/index.html], try this and see if you face it too.
In the demo menu navigate to contact -> international, then drag international a bit down. The entire submenu expands one more level repeating ‘American Offices’.
Looks like it needs a bit of fix.
Regards,
~Swathi
Hi there,
Could you please re-upload the DEMO files? The links are broken.
Waiting for answer,
thanks.
Great tutorial, but i think you should explain it with a more variable height and width.
And i just don’t get how to change the colors for each link.
Jeffrey, page is not found when I click on the demo link. Could you fix it please ?
Thanks.
Love the tutorial. One issue. The slidedown function only works once and then in order to get it again I have to refresh. Any Idea how I can fix it. Here’s the js I am using.
var site = function() {
this.navLi = $(‘#nav > li’).children(‘ul’).css(‘display’, ‘none’).end();
this.init();
};
site.prototype = {
init : function() {
this.setMenu();
},
// Enables the slidedown menu, and adds support for IE6
setMenu : function() {
this.navLi.hover(function() {
// mouseover
$(this).find(‘> ul’).stop(true, true).slideDown(500);
}, function() {
// mouseout
$(this).find(‘> ul’).stop(true, true).fadeout(300);
});
}
}
new site();
I followed it from the tutorial. I will take any suggestions which may help this issue. Thanks a million.
So I found the problem I had. Hope this helps anyone else who may have encountered it. This script what not mentioned on the video. This is one of the 3 scripts that should be on the bottom before the tag. This script is the one as far as I know responsible for it to work properly.
Here’s how I have it and it works like a charm
You can find the the scripts in the source files index.html
Love this menu…clean, efficient and lean. One issue I am having…the menu is dropping down under a table I have below it. I have upped the z-index of the div the nav menu is in, and that is not working…any suggestions? Thnx.
hi,
the sub sub menu don’t work under ie6, im presently on it but if someone have already fixe it taht can be appreciated.
really good tutorial! :P
Excellent !
hey
This is very useful tutorial and i want know how to add more effects for this navigation?
This tutorial was awesome!
One problem though. I tried animating the mouseout but I’m having troubles when the page runs. The mouseout works half the time, its very strange.
Anybody run into this or have a fix?
First of all, thanks a lot for this beautiful tutorial.
I’m using this menu for a site I’m working on.
I have a jQuery slideshow on the page as well. My slideshow disappears upon using this menu.
Any help will be appreciated. Thanks…
Try putting the menu js into a separate file and then point to that file in your HTML code to see if that fixes the problem. If it does then it mean that there is a hiccup in your original js file.
Great tutorial! It came in very handy and just what i needed, but when i try and implement it into my
WordPress theme it seems to loose the nice little animations. Anyone got any thoughts why?
I wonder if its possible to incorporate jquery menus like this one in asp.net websites?
in the demo the drop down menu is not working
Love it! Just added this to a client site that had a bland menu style.
Thanks Jeffrey.
Over a year latter, and this is still a great solution! Ready appreciate the tutorial Jeffrey.
I do have one question: this is working for me in Firefox, but I am having issues with Chrome/Safari. Any ideas on what might be happening here?
The site I am developing with this solution is here: http://www.officenetworx.com/dev/
Thanks!
- j
I want to thank you so much for this tutorial’s content and easy-to-follow presentation. You teach very well and I learned so much.
I was wondering if you could please offer additional code to simply right align the last menu option set. That would be so perfect. (There’s a cookie in it for you.)
Thanks again.
Great tutorial, I got everything to work perfectly except for the fadeOut, I must have spent over an hour checking and re-checking my code, I’ve just found the solution (more by chance than skill) and thought I’d leave a comment here just in case anyone else is having the same problem. I changed the html for importing jquery from
<pre name="code" class="html"<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
to
<pre name="code" class="html"<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
just that extra little .0 seems to make all the difference in the world.
Cheers.
http://jsfiddle.net/krisp/L2YwG/13/embedded/result/
Can anyone tell me where i went wrong?
Not so great a tutorial in that when I had finished the project the js didn’t work. Changed to exactly how the file in vid looks, checked extremely carefully so that it was exactly the same but it still didn’t work…
Tried using the source files and it works but not with fadeOut. Nor does it work if you change the time to ms instead of ‘slow’ as in the file.
Hmm, thanks to soapyfish it works now, though it still has a weird effect if you move the cursor away from the menu while the sub sub menu is selected…
Jeffrey, I’ve read that you can use transparency (or opacity) in gradients, too… could you apply a black to transparent gradient on the and just flip colors by appling the gray background color on the and using hover to simply change the backgroundcolor of the ?
Just trying to think on different layers of the box ;)
Ok… I’m trying to do a simplified one-level version with my suggested opacity tweak. It works (at least in Chrome… not in IE 9.0… I also need some wicked Alpha filter action) but I’m not able to make the div that contains my “nav” ul expand to… err… contain it. The containing div is 1px in height and 100percent of screen. I’m sure it’s related to having to position the “nav” but I don’t know a fix.
Anyone have any ideas for this, or for the alpha or opacity filter to create a transparency gradient in IE? The demo is at the URL linked on my name.
You should show in this tutorial how to make the sub menus open to the right or left depending if there´s enought space in the browser.
but it´s nice tut. thanks
tanx alot
best dynamic css menu
Hey Jeffrey.
What do I do if I wish the navigation in center of the page? It seems that it colapse if I put float: center :S