How to Build and Enhance a 3-Level Navigation Menu
videos

How to Build and Enhance a 3-Level Navigation Menu

on Mar 1st 2010 with 131 comments
Tutorial Details
  • Difficulty: Intermediate
  • Estimated Completion Time: 60 Minutes
  • Technologies: HTML, CSS3, jQuery
Download Source Files
Demo View It Online

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.

Write a PLUS tutorial

Tags: CSSVideos
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • http://twitter.com/nickplekhanov Nick Plekhanov

    Nice tutorial. Thanks

    • http://icontut.com nabeel

      Yh thanks, it helped me a lot!

  • snaKeSz

    Jeffrey i will check the tut now, but i am sure its amazing like the rest of what you are doing!

    • snaKeSz

      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 ;)

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Thanks. :)

  • http://www.design-fenix.com.ar Fernando

    Really good work ;)

  • http://www.milosmilikic.com Milos Milikic

    Great tutorial! Thanks!

  • http://www.moscreative.com Serhiy

    nice job!

  • Stephen

    Looks like it should be good, Jeffrey. I’ll watch it when I get a chance. ;)

  • http://www.artelixdesign.com Melvin José

    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.

    • http://johnathanbarrett.me Johnathan

      So if it was worth it, it wasn’t wasted? :P

  • Lenn

    Great tutorial!

    Before I would have done this all with javascript ;)

  • http://www.otheroom.com Barry Wood

    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 ?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      It’s less code if you put it at the bottom…and serves the same purpose. :)

    • http://www.wdonline.com Jeremy McPeak

      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.

  • w1sh

    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!

    • Camel

      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.

  • Henry

    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.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Yeah – I used a little square in the bottom right corner out of laziness. :) But you’re right!

      • Roland

        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!

  • Stephen

    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?

  • http://www.aerendyl.com Aerendyl

    Great tutorial Jeffrey.

    Can you tell me, which one Firefox Add-on is that “Disable, Cookies, CSS, Forms etc.”?

    Thanks! :)

  • http://sideradesign.com paul

    really well explained, thanks

  • Jason

    This couldn’t have come at a better time! Love the screencasts. Thank you for the great work.

  • http://www.canaydogan.net Can Aydoğan

    Great tutorial. Thanks!

  • Ice

    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.

    • http://www.wdonline.com Jeremy McPeak

      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.

      • http://www.jeffrey-way.com Jeffrey Way
        Author

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

  • Khalil

    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

  • http://laranzjoe.blogspot.com lawrence77

    @Jeff

    38min and 320MB :(

  • http://www.twitter.com/gauravjassal Gaurav

    Excellent tutorial !! Thanks

  • Mike

    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?

  • http://www.seowisedesigns.com Yheng

    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!

  • http://www.epsil.nl Roderick

    Nice tut.
    You forgot to explain the “hasChildren” part, that was actually exactly what I was interested to see.

    Keep them coming.

  • http://www.jordanwalker.net Jordan Walker

    Very nice tutorial, I look forward to diving into the code.

  • http://kickdebttothecurb.com/ Derek

    in IE8 it doesn’t have the sliding/fade and also doesn’t have the submenu identifier.

  • khaled

    Very Very nice tutorial

  • http://www.evanbot.com Evan Byrne

    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.

  • http://felixb.se/ Felix

    just what i was looking for =)

    thanks a bunch

  • John

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

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Check the demo. I added that ability. :)

      • William Rouse

        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.

      • William Rouse

        Found it. Thanks Jeffery

  • http://www.BryanWatson.ca Bryan Watson

    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.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

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

  • Rodge

    Grat tut! Thanx Jeff

    Why don’t you use classes for the ul’s?? Isn’t that easier to access in css and javascript?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

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

  • http://www.adaldesign.com Adal Design

    Waoh, you really put a lot of time and hard work into making this tutorial. Thanks for doing that!

  • nykeri

    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

  • http://bloggerzbible.blogspot.com/ Bloggerzbible

    The menu is beautiful

  • Mike

    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?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      They don’t support gradients unfortunately.

  • http://watchsportsfree.net James

    Jeff, O’ what happened to the good old driving into PHP videos? :(

  • http://codemyconcept.com CodeMyConcept

    A very easy way to create 3 level navigation menu. Definitely a bookmark.

  • http://www.creatuswebdesign.nl Creatus Webdesign

    I’m actualy working on a site with a 3 level menu, so this is going to help me a lot, thanks!

  • Zsolt
  • http://www.jsxtech.com Jaspal Singh

    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.

  • http://www.loadingvideo.net tolgahan

    good tutorial.Im see will.Thank you.

  • Jay

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

  • jmarreros

    thanks, it is very usefull

  • http://www.diegopetrucci.it Diego Petrucci

    I’m OT but how can I separate the icons in the dock like you did?

    • http://www.mike-moran.com Mike Moran

      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!

  • http://tarnoff.info Greg Tarnoff

    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.

  • DaveC

    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.

  • Daniel Ordonez

    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.

  • w1sh

    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.

  • Steven

    When ever i change the colors from the purple all it does is stay that color. WHY?

  • Sparky13

    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.

Newer Comments →