Articles

Animated Menu Using jQuery

2 Aug 2009 / 1192 comments

This tutorial illustrates how to implement a nice animated menu using jQuery and CSS. In case you don't know about jQuery, it is a "write less, do more" Javascript library. With jQuery we can create amazing effects on the web pages, writing some few lines of codes, and you don't need to be an experienced web programmer.

You can see the final result at this page, and you can download the complete source code with examples from here.

Step 1 – Set up the Structure

Here is the HTML markup that is used in the demo:

01.
02.
03.
04.
05.
06.
07.
08.
09.
<div id="menu" class="menu">
        <ul>
                <li><a href="javascript:;">Home</a></li>
                <li><a href="javascript:;">Work</a></li>
                <li><a href="javascript:;">Services</a></li>
                <li><a href="javascript:;">Support</a></li>
                <li><a href="javascript:;">Contacts</a></li>
        </ul>
</div>

The basic idea for the script is to create separated layers inside each anchor so we could animate them on hover. We will modify the DOM structure after DOM has finished loading, so each anchor will look something like this:

01.
02.
03.
04.
05.
<a href="javascript:;">
        <span class="out">Home</span>
        <span class="bg"></span>
        <span class="over">Home</span>
</a>

The content of anchor text will be placed inside two span elements, the third one will be used for background image.

Step 2 – Style with CSS

This is only a snippet of the CSS (for full CSS see the working example). I'm using the basic design, but you can customize it how you prefer.

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
.menu ul li a span {
        /* all layers will be absolute positioned */
        position: absolute;
        left: 0;
        width: 110px;
}
 
.menu ul li a span.out {
        top: 0px;
}
 
.menu ul li a span.over,
.menu ul li a span.bg {
        /* hide */  
        top: -45px;
}
 
#menu {
        background: #EEE;
}
 
#menu ul li a span {
        color: #000;
}
 
#menu ul li a span.over {
        color: #FFF;
}
 
#menu ul li span.bg {
        /* height of the menu items */  
        height: 45px;
        background: url('bg_over.gif') center center no-repeat;
}

Step 3 - JavaScript

I have added some inline comments so that it can be self explaining, I think.

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
/// wrap inner content of each anchor with first layer and append background layer
$("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );
 
// loop each anchor and add copy of text content
$("#menu li a").each(function() {
        $( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
});
 
$("#menu li a").hover(function() {
        // this function is fired when the mouse is moved over
        $(".out",  this).stop().animate({'top':  '45px'},    250); // move down - hide
        $(".over", this).stop().animate({'top':  '0px'},             250); // move down - show
        $(".bg",   this).stop().animate({'top':  '0px'},             130); // move down - show
 
}, function() {
        // this function is fired when the mouse is moved off
        $(".out",  this).stop().animate({'top':  '0px'},             250); // move up - show
        $(".over", this).stop().animate({'top':  '-45px'},   250); // move up - hide
        $(".bg",   this).stop().animate({'top':  '-45px'},   130); // move up - hide
});

Conclusion

That's it. You are welcome to check out the demo and download the source code to play with it. Experiment and customize this to fit your needs. If you have any questions, suggestions, or comments, please do not hesitate to let me know.

View Demo - Download

User Comments

  1. August 13th

    Did you try it in IE?

  2. Kete August 13th

    Hi. It works perfect on IE6.

  3. jQueryGlobe August 14th

    I updated example so it works for poor IE6 users, too.

  4. Emrah August 20th

    Good job. thanks

  5. adi daniel August 20th

    Hi I love this menu! Do you have any version with sublinks? This will be a great feature to implement. Bye

  6. jQueryGlobe August 21st

    @adi daniel: Usually animated menus are used only for top level navigation. If you could show nice example where sublinks are shown, I could try to recreate.

  7. September 22nd

    Indeed the very fine code and the excellent one. Thanks for sharing this. Cheers,SunJoo

  8. October 9th

    Very nice...

  9. prasadsambari October 14th

    Hi Have u checked in IE 7, because i tryed in ie 7, it showing the mouse over button also. Prasadsambari

  10. Madi October 15th

    very nice How can we apply this on vertical menu?

  11. jQueryGlobe October 16th

    @Madi: I haven`t tried, but you could change css to align vertically and change animation directions.

  12. October 18th

    Thank you very much for sharing it. Amazing effect!

  13. dev November 16th

    what diffrence between $(".out", this) and $(".out")?? any reference?

  14. adi daniel January 12th

    Hi and thanks for replay: "Usually animated menus are used only for top level navigation. If you could show nice example where sublinks are shown, I could try to recreate." Any type of submenu you think will suite. I want to use this menu for a wordpress them and there i need to be able to display submenu links. I realy like your project and i hope i will be able to use it. Thank you

  15. Catalin Cimpanu May 28th

    What is the license of this script?

  16. Do Teste June 7th

    Any chance to add submenus to this example?

  17. blueunicorn June 29th

    nice work mate

  18. JadiysonTaki August 29th

    very nice tips

  19. george November 29th

    i dont know what to say but carry on the good work!!!!

jQueryGlobe