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
Join our newsletter!
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
Nice tutorial. Thanks
Yh thanks, it helped me a lot!
Jeffrey i will check the tut now, but i am sure its amazing like the rest of what you are doing!
Okay i am done with watching and reading. Another two things i learned by you!
The “>” Operator and the 10px margin bug in ie! i had that problem lots of times and had to fix it with negative margins.
Thanks and a good night ;)
Thanks. :)
Really good work ;)
Great tutorial! Thanks!
nice job!
Looks like it should be good, Jeffrey. I’ll watch it when I get a chance. ;)
I really enjoyed watching your vid. Wasted some time I should have been working on a project, but this surely was worth every second of it.
So if it was worth it, it wasn’t wasted? :P
Great tutorial!
Before I would have done this all with javascript ;)
I see that you put the script includes for jQuery and scripts.js at the bottom of the body. Is there a reason you didn’t put them in the head and use $(document).ready ?
It’s less code if you put it at the bottom…and serves the same purpose. :)
The browser halts processing on the HTML to download and load JavaScript into the interpreter. Putting scripts at the bottom of the page lets the browser load the page first (which is what the user is there for) before loading the script (which is most cases is just for flavor). Even though the download and load time of the entire page is the same, letting the browser load the HTML first gives the feeling of a responsive and fast page.
Hey Jeff. I really love the fact you’re doing mostly screencasts now.
We all spend every day sifting through thousands of lines of cold code and tutorials. It’s nice that you’re bringing a human voice to things.
Plus… WORDS R HARD 4 READING!
While I watched this one (good job, Jeff), I actually tend to avoid the video casts. I’m hard-of-hearing, and videos are much harder to follow than a tutorial with text. Internet video has a long way to go to subtitle and caption everything for people like me. I really dislike the trend of going to video without an accompanying textual explanation or follow-along.
Ah well, I’ll hold my breath a bit longer then.
In the demo, there should be an arrow indicating that there are more links in the drop down menu for user experience. No big deal. Just a thought.
Yeah – I used a little square in the bottom right corner out of laziness. :) But you’re right!
Found an interesting bug in Safari – I couldn’t see the black squares in the bottom right corner (the hasChildren class spans) because of a “SyntaxError: Parse Error”
seems that the Safari implementation of JavaScript didn’t like your “class: ‘hasChildren’” in the appendTo – so I tried changing to a span with the hasChildren class implicitly and it worked.
Doing a bit of research yielded the fact that Safari throws a Parse Error when it encounters reserved words : http://blog.cleverelephant.ca/2007/05/safari-syntaxerror-parse-error.html
It worked fine in Firefox and Chrome – just not in Safari for me!
Jeff,
You may know this already, but I wanted to make sure my understanding is correct. Since you over-ride the sub-sub-menu list item display property, you do not need the > operator for the first level. So the reason the menu doesn’t work in IE6 without js is actually the li:hover attribute. Am I wrong about that?
Great tutorial Jeffrey.
Can you tell me, which one Firefox Add-on is that “Disable, Cookies, CSS, Forms etc.”?
Thanks! :)
Sure – you can get it here: https://addons.mozilla.org/en-US/firefox/addon/60
Thanks a lot! :)
really well explained, thanks
This couldn’t have come at a better time! Love the screencasts. Thank you for the great work.
Great tutorial. Thanks!
This is a nice tutorial but, maybe it’s just me, but I think the multilevel menus have kind of a web 1.0 kind of feel. I prefer the type of menu Reuters has on their site. Much more clear, to the point, and accessible with everything being there, and no hunting around different levels for items.
A simple example of multilevel madness would be firefox’s web developer addon. Although very useful and intuitive for a developer like me, for the average web user (client’s we have or even our parents), going through 4 to 5 levels just to select an option/page etc is not intuitive at all.
just my 2 cents.
It depends. From a user’s perspective, the user has used multi-level menus since they started using a computer; it’s a staple in all the major OS UIs. The user is used to it, and a web interface would do best to emulate that.
However, there is a time and a place to use them. Typical site navigation generally doesn’t need multi-level menus, and a more direct, mouse-movement navigational system would be ideal. But contrast that with web apps that have a ton of options, features, and functionalities. Multi-level menus would shine in that environment.
I agree. Remember – this tutorial is just to show how you could achieve nested submenus if you wanted to. I’m not necessarily promoting them one way or the other. :)
Again nice tuts
Thank you Jeff, for giving us your important time.
Request: If you don’t mind please teach us about Advanced Auto Complete with jQuery like facebook or hotmail.
Thanks
@Jeff
38min and 320MB :(
Excellent tutorial !! Thanks
Probably the most clear and concise multi-level nav menu tutorial I have seen – nice one. Thanks!
Any particular reason why you left out the fade in the source files?
I hate you Jeffrey! what took you so long to think of this tutorial, I really like this one such a clean and simple to implement.
I never regret having my very own Plus Membership!
Nice tut.
You forgot to explain the “hasChildren” part, that was actually exactly what I was interested to see.
Keep them coming.
Very nice tutorial, I look forward to diving into the code.
in IE8 it doesn’t have the sliding/fade and also doesn’t have the submenu identifier.
Very Very nice tutorial
Dang, and I was about to submit a tutorial on this exact subject! Oh well, I’ll just wait and post it on my own website.
Btw for some reason the animation isn’t working in safari 4 for me. It does work in FF though.
just what i was looking for =)
thanks a bunch
Great tutorial, and great final result. The only thing missing is a visual indicator on each menu item to show that there is a submenu. But i think this is something we can figure out how to do on our own! :)
Check the demo. I added that ability. :)
I don’t see any indication of a sub menu in the online demo and although there is a file called has Children.png in the download I don’t see it referenced in any of the files.
Found it. Thanks Jeffery
Hi Jeffery,
First off, great tutorial. Glad this one wasn’t broken up into a bunch of quick-tips. Also good to see that we are supporting CSS-only drop-downs. Enough with the Javascript menus already!
Second, I noticed you incorporated Dean Edwards IE7.js project. Well he recently rolled out a new version for the upcoming release of IE9 (IE9.js). It adds support for a lot of CSS3 selectors, and fixes the opacity property in IE5.5.
http://ie7-js.googlecode.com/svn/test/index.html
Third, maybe it’s just me, but when absolutely positioning the sub-menus, would it not be more ‘logical’ to use:
‘bottom:0;’ instead of ‘top:100%;’
Same can be said for ‘right:0;’ instead of ‘left:100%’, although they both accomplish the same thing.
Merely a preference of mine, but can really make a difference if someone else has to edit the menu, as it makes it more visually clear as to where the sub-menus are positioned.
Thanks for the IE9 script. I’ll check it out.
Yeah – I suppose you’re right. My thinking was that it would make more sense in the tutorial to add that reminder that we’re pushing the subMenu from the left all the way. But yeah, you’re right. :)
Grat tut! Thanx Jeff
Why don’t you use classes for the ul’s?? Isn’t that easier to access in css and javascript?
Use classes instead of ids? I suppose you could. But, when working in JavaScript, it’s always been to search for ids. It’s quicker in some browsers. :)
Waoh, you really put a lot of time and hard work into making this tutorial. Thanks for doing that!
wow just wow this was awesome. I never tried to create a multi level menu until now for my web engineering project but i used js instead now i can try in css nice thanks alot Jeff
The menu is beautiful
Great tutorial but I only get the gradients in Safari and Chrome, not Firefox 3.5.8 or IE8.
Any ideas on why that would be?
They don’t support gradients unfortunately.
Jeff, O’ what happened to the good old driving into PHP videos? :(
A very easy way to create 3 level navigation menu. Definitely a bookmark.
I’m actualy working on a site with a 3 level menu, so this is going to help me a lot, thanks!
http://nettuts.s3.cdn.plus.org/590_menu/menu.zip goes to a 404 Not Found page
O! great tutorial, excellent use of jquery to create 3 level navigational menu.
I would love to see more examples with :
1) vertical menu – from bottom to top.
2) horizontal menu –
2 a) from left to right
2 b) right to left.
good tutorial.Im see will.Thank you.
Hi Jeffrey Way,
that was a really good screencast. Ive always wanted to know how to create drop down menus without using javascript as usual IE screws with us.
Don’t get me wrong I think its always a good idea to use javascript to enhance the experience for people who don’t have javascript disabled (95% as of January 2008).
I was really interested in the OOP style you used for the javascript, would it be possible for you to make a screencast that goes into more depth about OOP javascript.
Thanks Jeffrey for everything you’ve taught me. ; )
thanks, it is very usefull
I’m OT but how can I separate the icons in the dock like you did?
I did it a while back, so I’m not remembering exactly which site I used but a quick google search found some pages on the subject. They are usually called “mac dock separators,” or something to that effect if you want to google it for yourself. This page looks like a similar method to the one I used:
http://www.grandmasterb.com/mac-tricks-adding-separators-to-the-dock/
Hope that helps!
Interesting tutorial, but one thing I noticed with your menu and many others like it: It isn’t exactly accessible and usable. For people using screen readers and keyboard navigation (these usually go hand in hand), as they tab through the menu it will skip all the child elements of the navigation. Now, there are ways to not skip them that I have run across, but the drop down menu never shows. If you don’t think to look at the status bar or you aren’t using a screen reader (I keyboard nav most things), then you have no clue where you are and can’t access parts of the site.
Jeffrey
Your video tutorials are cool.
May I suggest that you consider an update to this article that allows for keyboard access to the menu.
Hey!! that’s a nice nice tutorial thankyou very much Jefrey!
I got an issue :
I’m trying to see your online example, but i dont know if it is my browsers (ie8, chrome, firefox on pc and safari on a mac) or what, but jquery is not working at all.
At first i thougth that was something i code wrong so i came to see your online example but it doesn’t work either… and it was working just fine… what could it be?
the thing is that when the page is loading looking for the google’s links the ‘ul li’ displays on mouse over (without the effects) but when the full page loads it doesn’t display the over contents.
Just finished using this tut for a site I’m working on and can easily see using this on many, many sites in the future.
I love you Jeffrey Way. I mean that with every ounce of my body. Including my p.p.
When ever i change the colors from the purple all it does is stay that color. WHY?
I’d just like to say this was a brilliant tutorials. I son’t know heaps about css especially and this was a fairly easy tutorial to follow. The only thing I don’t understand is the IE bug stuff but that’s ok as it’s just dodgy :) lol. But again great tutorial.
The only thing I didn’t understand was the jquery. I presume we used jquery to do all the javascript stuff but you didn’t mention it at all. It would have been better if you’d at least said that this uses jquery.