Articles
Animated Menu Using jQuery
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.
User Comments
-
Hi. It works perfect on IE6.
-
Good job. thanks
-
Hi I love this menu! Do you have any version with sublinks? This will be a great feature to implement. Bye
-
Indeed the very fine code and the excellent one. Thanks for sharing this. Cheers,SunJoo
-
Very nice...
-
Hi Have u checked in IE 7, because i tryed in ie 7, it showing the mouse over button also. Prasadsambari
-
very nice How can we apply this on vertical menu?
-
Thank you very much for sharing it. Amazing effect!
-
what diffrence between $(".out", this) and $(".out")?? any reference?
-
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
-
What is the license of this script?
-
Any chance to add submenus to this example?
-
nice work mate
-
very nice tips
-
i dont know what to say but carry on the good work!!!!
Did you try it in IE?