Development

jQuery Menus with Stunning Animations

February 17th, 2011

jQuery is a great tool that helps our imagination turn ideas into reality. We can do almost everything we can think of with the help of this useful tool. Apart from being a lightweight cross-browser JavaScript library that simplifies HTML and Ajax interactions for rapid web development, it also gives sites that sleek look while also representing important data in a very attractive way.
[fblike]
You should always keep in mind that once a user lands on your site, the fist thing s/he does is to navigate and check out the content. If your site lacks in providing the user an attractive navigation, s/he will loose interest and will be clicking on that ‘Back’ button within seconds — even if the content on the site is excellent. Hence to stand apart you need to make your menu on your site different and appealing to users.

We’ve collected some tutorials to help you understand how to give your menus that stunning visual effect and animations. Please feel free to share any sites you’ve discovered that have been developed with jQuery. Enjoy!

Scrollable Thumbs Menu with jQuery
In this tutorial you can learn how to create a fixed menu with scrollable thumbs which you can nicely control with your mouse:

Scrollable Thumbs Menu with jQuery

Sweet Menu
Sweet Menu takes an ordinary list of links and makes it a sweet looking menu. It does this by utilizing jQuery and it’s plugin system:

Sweet Menu

Creating a Fancy Menu Using CSS3 and jQuery
Here you can see how a fancy menu can be created with the help of the new CSS3 features along wth jQuey:

Creating a Fancy menu using CSS3 and jQuery

Rocking and Rolling Rounded Menu with jQuery
In this tutorial you can make use of the rotating and scaling jQuery patch from Zachary Johnson to create a menu with little icons that will rotate when hovering:

Rocking and Rolling Rounded Menu with jQuery

Slick Drop-Down Menu with Easing Effect Using jQuery & CSS
Drop-down menus are an excellent feature because they help clean up a busy layout. When structured correctly, drop-down menus can be a great navigation tool:

Slick Drop down Menu with Easing Effect Using jQuery & CSS

Thumbnails Navigation Gallery with jQuery
Here is a great tutorial on how to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation:

Thumbnails Navigation Gallery with jQuery

Collapsing Site Navigation with jQuery
A collapsing menu that contains vertical navigation bars and a slide out content area can be created like this:

Collapsing Site Navigation with jQuery

jStackmenu
Here is a jQuery UI widget for Stack Menus. Click here to find out more:

jStackmenu

Create Your Own “kwicks” jQuery Effect
Check out this tutorial to find out how you can create your own kwicks jQuery effect:

Create Your Own “kwicks” jQuery Effect

Overlap that Menu!
In this tutorial, you can learn how to achieve overlapping effects to your menu:

Overlap that Menu!

Overlay Effect Menu with jQuery
In this tutorial you can learn how to create a simple menu that will stand out once you hover over it by covering everything except the menu with a dark overlay:

Overlay Effect Menu with jQuery

jQuery Multicolor Animation Drop-Down Navigation Menu
Check out this tutorial on how to create a multicolor drop-down navigation menu with jQuery:

jQuery Multicolor animation drop down navigation menu

jQuery Floating Menu
A simple navigation menu that “follows” page scrolling and expands on mouse over — made with CSS and jQuery:

jquery floating menu

Kwicks for jQuery & a Horizontal Animated Menu
Here is a walkthrough where you can see the final result of using Kwicks. A jQuery plugin that builds a horizontal menu with a nice effect like Mootools but much more customizable and versatile:

Kwicks for jQuery and an awesome horizontal animated menu

Fading Navigation Menu
Here is a simple, neat navigation menu using CSS sprites and a bit of jQuery code to give it a visually appealing fade effect:

Fading Navigation Menu

UI Elements: Search Box with Filter and Large Drop Down Menu
A tutorial that will show you how to create a search box with a filter and a large drop-down menu:

UI Elements: Search Box with Filter and Large Drop Down Menu

jQuery Convertion: Garagedoor Slider Navigation Effect
Learn how to turn your menu to jQuery and give it a Garagedoor slider navigation effect as well:

jQuery convertion: Garagedoor slider navigation effect

Create Bounce Out Vertical Menu with jQuery
A simple bounce out vertical menu is created here with the help of a little bit of CSS3 and jQuery Framework to create a vertical menu which on mouse hover gives a nice bounce out sliding effect:

Create Bounce out Vertical menu with jQuery

Slide Down Box Menu with jQuery and CSS3
Learn how to create a unique sliding box navigation. The idea here is to make a box with the menu item slide out, while a thumbnail pops up:

Slide Down Box Menu with jQuery and CSS3

LavaLamp Plugin
This plugin has some attractive features like targeting and container options, automatic default location, vertical and horizontal morphing:

LavaLamp Plugin

Little Boxes Menu with jQuery
A nice display of little boxes that animate randomly when the menu item is clicked. It then expands and reveals a content area for some description or links:

Little Boxes Menu with jQuery

Horizontal Scrolling Menu Made with CSS and jQuery
Here is a tutorial that explains how to make a horizontal scrolling menu made with CSS and jQuery:

Horizontal Scrolling Menu made with CSS and jQuery

Beautiful Background Image Navigation with jQuery
Learn how to create a beautiful navigation that has a background image slide effect. The main idea here is to have three list items that contain the same background image but with a different position:

Beautiful Background Image Navigation with jQuery

Awesome Cufonized Fly-out Menu with jQuery and CSS3
One of our favourites! Here is a full page cufonized menu that has two nice features:

Awesome Cufonized Fly-out Menu with jQuery and CSS3

(ik)
[fblike]

Bhanu Ahluwalia is a graduate in Computer Science and a social media enthusiast from India. He specializes in web design by qualification and photography by passion. He is an avid blogger, running TutZone and co-authoring DesignUnder and SloDive. You can reach him via Twitter.

Tags: , ,

35 comments for „jQuery Menus with Stunning Animations
  1. Santiago on February 17th, 2011 at 2:19 pm

    Really nice collection! Thanks a lot man : )

  2. Ajitah on February 17th, 2011 at 2:53 pm

    Dude.. Very good collection :)

  3. Vaibhav Gupta on February 17th, 2011 at 3:59 pm

    gr8 collection mate!

  4. Todd Jackson on February 17th, 2011 at 4:25 pm

    Great jQuery Collection!

  5. Maicon Sobczak on February 17th, 2011 at 4:36 pm

    Codrops make the best menu/slideshow effects and animations in the world of tutorials blogs.

  6. AJ King on February 17th, 2011 at 7:04 pm

    Fantastic collection. Thanks for doing all this research. And thanks to all the developers of the demos and tutorials for creating and sharing with the community!

  7. Rana Mukherjee on February 18th, 2011 at 6:10 am

    Nice collections

  8. Farid Hadi on February 18th, 2011 at 8:42 am

    This is a great collection. Thanks for sharing it with us.

  9. Qamar on February 18th, 2011 at 8:53 am

    Awesome Collection. I really like Creating a Fancy Menu Using CSS3 and jQuery. Thanks for sharing.

  10. raybak on February 18th, 2011 at 11:49 am

    these are all great ideas for menus.JQuery is awsome

  11. Sergio on February 18th, 2011 at 2:27 pm

    wonderful galleries

  12. Adam Walker on February 19th, 2011 at 7:07 pm

    Fantastic list, it’s amazing what you can do with jQuery… which is good because I’d rather get to grips with that than master actionscript 3.

  13. adamj on February 19th, 2011 at 10:11 pm

    Thanks so much for these – all great inspiration.

  14. Shibu on February 20th, 2011 at 4:23 pm

    Absolutely mind blowing….. Very thankful to you for sharing all these collections.

  15. Aj Clarke on February 20th, 2011 at 6:06 pm

    Awesome list. I am really digging the thumbnails navigation gallery by “tympanus”. I will definitely be using it in the future. Thanks!

  16. Ralph on February 22nd, 2011 at 5:36 pm

    There are many ideas around the navigation of websites. Thank you a lot.

  17. eHussain Cutpiecewala on February 23rd, 2011 at 10:32 am

    Awesome!

  18. Luigi on April 7th, 2011 at 5:24 pm

    Awesome collection! Thanks a lot from Italy !

  19. markogic on April 15th, 2011 at 5:21 pm

    wow very very nice and useful, thanks for this grade collection it will help a lot.

    Best Regards, marko

  20. Ahmed Fouad on May 3rd, 2011 at 10:50 am

    Thank you very much .. there are no words left to speak .. I love this site

  21. jean on September 19th, 2011 at 5:47 am

    it was all so nice.

  22. aries on December 8th, 2011 at 9:07 am

    thank you, this for my project :)

  23. Joe@Michigan Web Design on January 25th, 2012 at 4:17 pm

    Nice collection. Thank god for jquery in all of its glory. :) I am considering using a few of these on a clients site. Thanks again!

  24. Raffy on April 5th, 2012 at 3:11 pm

    dude this is cooolllll =) thanx and God Bless!

  25. Shamna on May 16th, 2012 at 5:13 pm

    Great stuff! Esp liked the Rocking and Rolling Rounded Menu with jQuery.

  26. Akash@HostMafia on July 20th, 2012 at 7:15 pm

    really liked the collapsinng jquery navigation. Thanks.

  27. Ram on September 8th, 2012 at 10:49 am

    This is a great collection. Thanks for sharing it with us.

  28. Jagmeet on September 28th, 2012 at 11:55 am

    really very awesome collection..
    it was really helpful..
    thanks man.. :)

  29. Lahiru on October 16th, 2012 at 8:57 am

    MaxxxxxxxxxxxxxxxxxxxxxxxxxaaaaaaaaaaaaA…..
    tnx and nice ,..,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,

  30. Ali on October 17th, 2012 at 1:00 am

    Very nice examples. Thanks for sharing.

  31. Bakeca Udine on December 18th, 2012 at 1:26 pm

    How awesome is the Little Boxes Menu with jQuery menu ? You can make a personal portfolio using only this menu for the whole website . Amazing menu and a great list

  32. Shinto on February 7th, 2013 at 5:33 am

    very very nice examples…thanks for sharing..

  33. pThomas on September 19th, 2013 at 7:03 am

    Great Collection. I’m putting a new menu system in our website and your fine list of menus made it easy and quick to pick. Thanks!

  34. Josh on September 28th, 2013 at 8:34 pm

    Many of these are now links to abandoned / broken sites

    • Dieter Petereit on September 30th, 2013 at 8:35 am

      That’s the nature of old articles. We’d need an army to keep them updated.