jQuery Tabbed Navigation Tutorial – How to create your own fancy menu

Lot of people have asked how to create the tabbed navigation as seen on my site. Josh who coded it originally has agreed to write a tutorial.

Using jQuery to Create a Tabbed Navigation

One of the many challenges when it comes to information architecture is the idea of presenting enough information for people to make informed decisions, but not overwhelm them while doing so. This can be particularly tricky when it comes to dealing with navigation. One technique that is often used to combat this problem is the concept of a tabbed navigation. Exceptional, we’ve got a standard navigation with a sub-navigation underneath.

In an attempt to get explain this, lets go ahead and setup our own tabbed navigation using some jQuery and CSS. Here is what we’ll end up with.

First thing’s first, we’ll want to setup our basic markup for the navigation.



   
       jQuery Tabbed Navigation
   
   
   
       
   
   

Notice the nested <ul>s within the <li>s. These <ul>s are going to act as our sub-navigation lists. We’ll be using some CSS to initially hide these unordered lists and give the effect of a nice and simple navigation that only gives you more information when you ask for it.

Let’s go ahead and create our CSS now, so that we’ve got something to work with in jQuery.


I generally like to start by removing the default margins and padding from all elements using *{margin:0;padding:0;}. For the purposes of this tutorial we’ll try to keep the CSS to a minimum.

First we defined some basic text styling for the <body> of the page. We then defined the styles for our <div id=”header”></div>. In order to achieve the multi-level effect of the navigation I’ve created a background image for the header named “bg.gif”, but this could just as easily been done with CSS and some well-placed <div> tags. We’re using relative positioning for the <div class=”menu”></div> so we can have a little more control over where everything ends up.

Ultimately, you can modify this CSS to suite your needs. I’m sure this could have been done a little more “bulletproof”, but you get the idea. Of special note is the .sub_nav declaration. The display:none; is what initially hides the sub-navigation which will later be turned on with javascript.

Next, we’ll need to add the necessary scripts to control the functionality of switching the sub-navigations when you hover over the various “tabs.” We’ll be using the Google Code’s minified jQuery for simplicity’s sake. Feel free to use whatever jQuery distribution you are most comfortable with. Personally, I like to use the Google APIs whenever possible to save some time in setting everything up on my end.Time for the javascript, let’s setup our hover function.


This is pretty straightforward jQuery, so let’s break it down and see what we’ve done.

First, we’ve set everything within a $(document).ready(function(){}); which basically tells the script to wait until the page is ready to be manipulated before executing. Next we create our hover function under $(“#main_nav li a.main”).hover(function(){}); so that we can apply some specific events to take place when the element is hovered over.

What $("#main_nav li a.main").removeClass("active"); is basically doing is “resetting” the classes applied to the tabs. Without this we’d end up with what appears to be three active tabs since none of them would ever be “deactivated” when you mouse away from them. We used $(this).addClass("active"); to apply the “active” class to the currently hovered tab. Next, we’ve used $(this).queue(function() {}); to setup a custom fx queue in jQuery.

Using .queue is especially nice, because we can control the sequence of events much more rigidly. By using a .queue we’ve told the browser to first hide the sub-navigation (thus clearing any that should not be shown), and THEN fade in our current sub-navigation. All pretty snappy, and it can ensure that we won’t end up with two sub-navigations active at the same time.

Here is the final code with everything in place:



   
       jQuery Tabbed Navigation
       
       
       
       
       

   
   
   
       
   
   

Using the concept of siblings in javascript we’re able to apply a small amount of code to any number of nested menus. With the power of a javascript library like jQuery and a bit of CSS by our side we are able to create rather remarkable results with very little effort. Happy coding!


More like this:


Posted in: WordPress
TAGS:, , , , , , , , , , , , , , ,
Both comments and trackbacks are currently closed.

17 Comments

  1. Mar 13th, 2012 1:22 PM

    I'm a bit late to the party but great tutorial. Thanks :)

  2. Oct 21st, 2011 1:03 PM

    Thank you so much for sharing such a lovely tutorial..
    I tried it and it looks awesome on my website..

  3. Oct 14th, 2011 6:24 PM

    Simple and cool Script, this is what I was looking for, thanks

  4. Apr 20th, 2011 8:02 AM

    My blog looks cool with this widget ;)

  5. kaela
    Nov 29th, 2010 10:50 PM

    i love this nav - but using it with the old jquery 1.3.2 messed up my other jquery plug-in (that used the current 1.4.4).

    and the nav doesn't work properly with the current jquery. i am bummed!

  6. Nov 24th, 2010 8:10 AM

    it gives me a great help , thanks for sharing

  7. Nov 5th, 2010 7:46 AM

    Thanks for you useful nice tutorial! It's very nice and if use in my own websites.

  8. Jesse
    Oct 25th, 2010 1:44 AM

    This is very nice. The only problem is if you hover over a non-active link, it switches the active state to the latest hover event. For instance, if you were on the homepage, and you hovered over the about tab, and then proceeded down the page, the about link would remain active, while the home link would be inactive.

  9. Oct 2nd, 2010 11:49 PM

    Hi Vladimir, is it any method to ad this kind of menu to your WP theme Amazing Grace?
    I tried, but without success :(

  10. Vladan
    Sep 15th, 2010 12:47 PM

    Hi Vladimir and Josh,

    First thanks for this great tutorial.
    Second, I'm using jQuery library 1.4.2 and there is some strange behavior while fade in/out .sub_nav.
    Can you tell me how to solve that problem.

    Kind Regards

  11. Sep 13th, 2010 6:47 PM

    Thanks Josh for this nice tutorial.

    Is it possible to write a post on how can i integret the "Tabbed Navigation" to my wordpress site?

    Thanks in advance

  12. Sep 12th, 2010 3:02 AM

    Please, I need all of your help! I am a total newby to Web design. I have only been trying to design my own website for 2 months now. I am using iWeb only and I do not have DreamWeaver because even iWeb is complicated for me. I am trying to add a fading navigation bar to my website. The way the navigation bar is now, it is too static. Isn't there a simple html snippet I can add to my iWeb page and that's it? If any of you would be willing to work with me on a step-by-step basis, I would be very grateful. Even better, if any of you live in NYC and would be willing to get together with me to get this up and running on my iWeb page, that would be the best!
    Thank you,
    David
    davidhunternyc@gmail.com

  13. Sep 9th, 2010 9:42 AM

    ...... Proper, simple & nice menu !

  14. Sep 8th, 2010 5:07 PM

    Very nice :)

    Only thing i'd say is add .stop() before the fadein/fadeout. At the moment if you hover between the options fast and then stop, the animations will continue. If you use .stop() before each one, it will stop the animation queue and then only respond to what the user does.

    Nice little tut though - loving the SEO add-on too!

    • Sep 8th, 2010 9:06 PM

      I did consider this, but when using .stop in this example we run the risk of the fadeOut / fadeIn not finishing.

  15. Sep 8th, 2010 1:59 PM

    Hi Vladimir,

    Any particular reason why you are using an old version of the jQuery library? I do like your approach, it's pretty straight forward. Greetings