enavu webdevmania tutsvalley psdestination
visit the enavu network
12 Comments Article Title Overlay Article Title

Cool navigation menu made with JQuery

In this tutorial we will make a navigation that’s not ordinary. I saw this effect on b5media, it’s made with flash there but i liked how it looks so i decided to make it with JQuery.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Demo Source


   <div id='menu_holder'>
            <li id='first_li' class='selected'>Link1</li>
            <li id='second_li'>Link2</li>
            <li id='third_li'>Link3</li>
            <div class='clear'></div>

A basic html for a navigation. Nothing much. You will notice that the list items have their own id’s because of the different background color they will have, if you don’t plan to have different background colors you don’t need it. You can see that the first item has class named “selected” which will be the selector for the current page.


    /* when we use css float element we must clear it. This tutorial doesn't cover explaining floating and clearing but if you aren't
    familiar with it i would suggest a tutorial written by Chrics Coyier at css-tricks.com. The link to the article is bellow this coding part*/
    .clear { clear: both }

    #menu_holder ul{
        list-style-type: none; /* Remove the default styling on unordered list items (the circles) */
    #menu_holder ul li {
        float:left; /* Float the list items (menu items in this case) to float:left so they are positioned inline */
        width:150px; /* The default width of the list items */
    #menu_holder ul li a {
    /* the next 2 lines are important because we want to whole menu item to be clickable and not just the text */
    display:block; /* important so we can set width to it */
    width:100%;   /* width of the link = width of the list item */
    /* styling you can change :)  */

    /* Just styling bellow, you can make your own */
    #menu_holder ul { margin:0px; padding:0px; }
    #menu_holder ul li { color:white; font-size:20px; font-weight:bold; border:4px solid black;}
    #first_li{ background-color: #000080;}
    #second_li{ background-color: #008080;}
    #third_li{ background-color: #8080FF;}

Chris Coyier about floating and clearing

And voila, we have our navigation. I know it doesn’t look amazing, but we are making a jquery navigation effect, not designing a navigation.


Now, the main part, JQuery…



        //declaring the varibles we will use
        var speed = 500; //speed of the animation in milliseconds
        var min_width = 150; //the minimum width of an menu item
        var max_width = 400; //the maximum width of an menu item

        //animate the default selected menu item to the max width
        $('.selected').animate( { width : max_width } );

        /* We are going to use the jquery's hover function to achieve the effect  '*/
        $('#menu_holder ul li').hover(function(){

            /*so when hovered over an item, we initiate the animate function to make
            the width of the hovered item scroll to the max_width we declared with speed we declared */
            $(this).animate({ width : max_width }, { queue:false , duration:speed});

            /* and by using siblings() we animae the rest of the menu items to the width min_width we declared */
            $(this).siblings().animate({ width : min_width }, { queue:false , duration:speed});

        //when the user hovers out

            //get the class of the menu item we hovered out of...
            var class_ = $(this).attr('class');

            //...and check if the class name is NOT 'selected'...
            if(class_ != 'selected'){
                //...and if it's NOT we animate the non 'selected' divs to the min_width and the 'selected' to the max_width '
                $('#menu_holder ul li').animate({ width : min_width }, { queue:false , duration:speed});
                $('.selected').animate( { width : max_width }, { queue:false , duration:speed});

Final words

That’s it for today, i hope you like the final outcome, and if you do SHARE this tutorial.

Related posts:

  1. Making A Cool Thumbnail Effect With Zoom And Sliding Captions
  2. Making an infinite JQuery carousel
  3. Making a Cool Spotlight Effect with jQuery
  4. Making a jQuery infinite carousel with nice features
  5. Image splitting effect with CSS and JQuery

Slobodan Kustrimovic

This author has yet to fill his BIO.

Did you absolutely LOVE this article... share it!


  • If you like it, tell me here, in the comments. If you do like it, i will add some more functionality to it. You will be amazed how simple things can improve the experience.

  • Looks the same as “kwicks” effect

  • Simillar but not same.

  • It’s close enough (CSS is wrong, but yeah that’s fine), I’m impressed, well done :) Never thought anyone would try and copy our flash effect though :D

  • Thanks Jeremy, i’m happy you like it :)

    Have some more flash effects for me to copy? :)

  • How about randomly populate modal popup controls that appear randomly inside the screen and make them draggable like I do in Macromedia Flash 10.

    That would be a wonder.

  • @xequence – give me a link to a demo page and i’ll see what i can do :)

  • Hi may i use this for my web site?

  • Of course! Feel free to use anything we show in this website!

  • I don’t know who you wrote this for but you helped a borhetr out.

Leave your own!


freedcamp free project management

Popular Articles

fzilla file hosting