JQuery is a lightweight, cross-browser compliant, and extremely powerful Javascript framework. Among lots of other things, it can help you building gorgeous and usable navigation menus. In this article, I have selected 10 of the best JQuery menu available.

Animated Drop Down menu with JQuery

A DropDrown menu is often a good choice when you have many items to display. In such cases, what about animating it?

Source

iPod style menu

The iPhone is indeed a very good example of minimalistic, but great looking, design. This article will teach you how you can easily achieve the same effect on any website, using the power of JQuery.

Source

Superfish – jQuery menu plugin

Superfish is a JQuery plugin especially dedicated to menus. It allows many improvement from what you can achieve with HTML and CSS as such as hover support for IE6, animations, keyboard accessibility and more.

Source

Lavalamp for JQuery lovers

Lavalamp is a simple, ready to use JQuery plugin which allow you to create a stunning effect over your horizontal navigation bars. Nice to see, easy to implement.

Source

How to make a smooth animated menu with JQuery

A very nice tutorial to learn to create a very nice and artistic effect for your websites.

Source

Navigation effect using JQuery

Another “Great to read, Simple to implement” JQuery tutorial. Its purpose is to teach you recreating MooTools homepage menu…using JQuery!

Source

Animated JQuery menu

Among other things, JQuery is very useful for an easy manipulation of the CSS background-position property. This tutorial is a perfect example to illustrate that possibility.
Althought this menu is not, in my opinion, the best looking of this article, it has always be a client’s favorite.

Source

How to create a vertical sliding JQuery menu

Like the dropdown menu that you can see at the top of most Envato sites? If yes, this tutorial will allow you to learn how to create a similar kind of menu. Your clients will love it, there’s no doubt about it. And even better, the tutorial will also teach you how to design that kind of menu using Photoshop.

Source

Apple menu, improved

Who doesn’t like the look and feel of the Apple website? One year ago, we released a nice tutorial to help you recreating Apple’s website menu.
This new tutorial, provided by Kriesi.at, will teach you how to recreate Apple’s menu, and even better, how to enhance it it using JQuery.

Source

Using jQuery for Background Image Animations

I already talked about how great JQuery is for animating background using the background-position CSS property. This article is very great to improve your skills in that domain.

Source

Well, who need flash, after knowing the power of JQuery? If you enjoyed this article, you should also like the following:

 

Related Posts

No related posts.
 

28 Comments

  1. Roman
    Posted September 7, 2009 at 8:05 pm | Permalink

    Its a first time I hear about jQuery. And its great. I will give it a try.

    Reply
  2. reza
    Posted September 7, 2009 at 10:16 pm | Permalink

    already used it in most of my themes…hehe

    dynamicdrive provide a lot of jquery based script for dropdown menu

    Reply
  3. Eric B.
    Posted September 7, 2009 at 11:38 pm | Permalink

    Is it really a good idea to be using Javascript for navigation menus? This could possibly prevent users with Javascript disabled from viewing your site.

    Reply
  4. Best CSS Gallery
    Posted September 8, 2009 at 10:12 am | Permalink

    Cool menus, look really great

    Reply
  5. Cory
    Posted September 8, 2009 at 1:36 pm | Permalink

    Normally I’d be enthused, but since there are TONS of jQuery nav lists out there, I can’t say I’m all that impressed. Most of this is standard.

    Reply
  6. James Murdoch
    Posted September 8, 2009 at 3:01 pm | Permalink

    Jquery! its the first time i have heard about it and i must say i am very impressed by all its navigation menu.I think it would be fun using them or just trying them out.Hey Reza since you have already used it infact most of them, how was your experience ?

    Reply
  7. webdevvote.com
    Posted September 8, 2009 at 5:17 pm | Permalink

    You are voted!
    Track back from WebDevVote.com

    Reply
  8. reza
    Posted September 9, 2009 at 2:32 am | Permalink

    @james murdoch
    the only problem i found so far using this jquery is when i use it with other js framework, mootools. sometimes conflict occurs, and one of those framework doesnt work

    thanks Gods there’s always uncle google to ask how to solve the problem:D

    Reply
  9. Logo Bliss
    Posted September 9, 2009 at 11:01 am | Permalink

    Great collection, I will be refering back this when in need of inspiration..
    Thanks !

    Reply
  10. Stu
    Posted September 9, 2009 at 11:37 am | Permalink

    I’ve seen a lot of these before but the iPod style menu is new to me, very nicely done, I continue to be amazed at the results that can be achieved with jquery.

    Reply
  11. SuperMario290
    Posted September 9, 2009 at 4:47 pm | Permalink

    That’s a really great list man. I’m definitely gonna check some of those out and maybe implement them into my sites and wordpress themes. :D

    Reply
  12. Jonathan Bennett
    Posted September 9, 2009 at 5:32 pm | Permalink

    That iPod nav is very slick! Thanks for the list.

    Reply
  13. RWH
    Posted September 10, 2009 at 7:46 pm | Permalink

    Hey Jean, great job on listing these jQuery menus. They all look beautiful and stunning, particularly Lavalamp, which grabbed my attention for its simplicity and vibrancy…

    Reply
  14. Nico
    Posted September 11, 2009 at 2:26 pm | Permalink

    Thanks for the examples. It’s always nice to get a visual of different samples. JQuery is man’s best friend.

    Reply
  15. Vitezslav Valka
    Posted September 15, 2009 at 10:40 pm | Permalink

    Lovely list. I know that we made a right choice with implementing jQuery at pixmac.com soon :-) Thanks!

    Reply
  16. Sarah
    Posted September 17, 2009 at 5:10 pm | Permalink

    An inspiring list. I usually just use straight text links with CSS rollover colour changes, think I will start putting a bit more effort in!

    Reply
  17. Shahriar Hyder
    Posted September 25, 2009 at 11:39 am | Permalink

    Nice collection of jQuery navigation menus mate. I have also linked to yours from my blog post below where I am trying to collect the most useful and common jQuery code snippets for JavaScript over the web. Here is the title and the link to the jQuery link compilation endeavor:

    Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance

    http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/

    Reply
  18. joyoge designers' bookmark
    Posted October 6, 2009 at 1:18 am | Permalink

    very nice menus, thanks for share..

    Reply
  19. Greg
    Posted October 20, 2009 at 7:19 pm | Permalink

    @reza
    If your getting conflicts use “jQuery.noConflict();”
    you can find out more information on the jQuery website url below
    http://docs.jquery.com/Using_jQuery_with_Other_Libraries

    Reply
  20. Jeremy Nicoll
    Posted October 20, 2009 at 7:23 pm | Permalink

    For the CSS background position one, you can do that with simple CSS with the :hover sudo element and adding a .selected class or something like that.

    Reply
  21. Nils
    Posted October 21, 2009 at 3:15 am | Permalink

    Thanks for providing these ten jQuery navigation menus. Your post is really helpful. Thanks.

    Reply
  22. JQuery Fan
    Posted December 15, 2009 at 6:33 pm | Permalink

    I have just started getting into JQuery and so far I love it. It is far superior to the built in .NET Ajax controls, although I hear .NET 4.0 is supposed to play nicely with JQuery. Anyways, great post on navigation menu options. Seamless navigation options is exactly the reason I started looking at JQuery in the first place.

    Reply
  23. Radz Nguyen
    Posted December 27, 2009 at 6:44 am | Permalink

    Which menu do you think is the best ? I love all of them :) . Thank you .

    Reply
  24. JJ Lam
    Posted January 19, 2010 at 11:18 am | Permalink

    Hi,

    Can you help me? For this Demo “Using jQuery for Background Image Animations”, I want to change Image background slide from LEFT to Right, not RIGHT to LEFT. Please, can you tell me how to change?

    Many thanks,

    Reply
  25. ooty
    Posted March 7, 2010 at 2:14 am | Permalink

    good collections of jquery menus

    Reply
  26. cuaryos
    Posted March 28, 2010 at 10:50 pm | Permalink

    i was tried How to make a smooth animated menu with JQuery, and work for some part. but my footer section with link crash and expanded.

    Reply
  27. Vegetarian Jen
    Posted March 30, 2010 at 12:23 am | Permalink

    Thanks for posting the great collection of J query menus, I am going to put them to good use in the next several months!

    Thanks again,
    Jen

    Reply
  28. Laura Geisler
    Posted July 26, 2010 at 12:43 pm | Permalink

    Hello, first of all, I would like to let you know that I think it’s a excellent website you got here. My question is, I haven’t understood the way to include your blog rss or atom in my rss reader, where is the link for the rss feed? Thank you

    Reply

18 Trackbacks

  1. By 10 incredible JQuery navigation menus | Webs Developer on September 7, 2009 at 8:00 pm

    [...] 10 incredible JQuery navigation menus Share and Enjoy: [...]

  2. By 10 incredible JQuery navigation menus « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit on September 7, 2009 at 11:16 pm

    [...] 10 incredible JQuery navigation menuscatswhocode.com [...]

  3. By 10 incredible JQuery navigation menus | TopRoundups on September 8, 2009 at 4:21 am

    [...] 10 incredible JQuery navigation menus Submitted by Editorial Team [...]

  4. By links for 2009-09-07 .:: [aka щямукюшт] Ozver.in | Озверин on September 8, 2009 at 6:25 am

    [...] 10 incredible JQuery navigation menus (tags: jquery navigation menu javascript design menus webdesign plugins) [...]

  5. By All Teched Up! « Caintech.co.uk on September 8, 2009 at 3:07 pm

    [...] With RSSCloud Azul Systems – Cliff Click Jr.s Blog Style a List with One Pixel CSS-Tricks 10 incredible JQuery navigation menus 10 Ways to Customize and Personalize your WordPress Blog Pro Blog Windows XP10 – IT [...]

  6. By 10 Incredible jQuery Navigation Menus | Choose Daily on September 8, 2009 at 3:44 pm

    [...] 10 Incredible jQuery Navigation Menus [...]

  7. By A Round-Up of Super Javascript and jQuery Plugins | Design Reviver on September 8, 2009 at 9:01 pm

    [...] 10 Incredible JQuery Navigation Menus [...]

  8. By links for 2009-09-08 « Mandarine on September 9, 2009 at 6:09 am

    [...] 10 incredible JQuery navigation menus (tags: list jquery plugin menus) [...]

  9. By 10 Menus de navegación con jQuery | JR Blog on September 9, 2009 at 3:04 pm

    [...] 10 incredible JQuery navigation menus. Algunos menus animados y con un estilo llamativo que se puede lograr con la ayuda de jQuery y [...]

  10. By A Round-Up of Super Javascript and jQuery Plugins | Easy Street Interactive Blog on September 10, 2009 at 4:36 pm

    [...] 10 Incredible JQuery Navigation Menus [...]

  11. By Notable Tech Posts – 2009.09.13 | The Life of Lew Ayotte on September 13, 2009 at 6:03 pm

    [...] 10 incredible jquery navigation menus [...]

  12. By BlogoTips » 10 Navigatin menus with JQuery on September 15, 2009 at 12:02 pm

    [...] Source Permalink 0 Comment filed under: Wordpress, how to Tagged with: JQuery, navigation, navigation menu, style nav menu, wordpress tips [...]

  13. By 網站製作學習誌 » [Web] 連結分享 on September 22, 2009 at 6:06 am

    [...] 10 incredible JQuery navigation menus [...]

  14. By 10 adet inanılmaz jQuery navigasyon menu… « wiki.laroouse on September 23, 2009 at 12:13 pm

    [...] adet inanılmaz jQuery navigasyon menu http://www.catswhocode.com/blog/10-incredible-jquery-navigation-menus 0 people like this post. Like  [...]

  15. By Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance « Technosiastic! on October 12, 2009 at 6:41 am

    [...] 10 incredible JQuery navigation menus [...]

  16. By 10 Tutoriais e demos de menus em JQuery | idealMind on October 21, 2009 at 3:06 am

    [...] Eu descobri esses exemplos no site http://www.catswhocode.com/blog/10-incredible-jquery-navigation-menus [...]

  17. By Weekly Round-up ~ Oct 23, 09 Edition | ClearType Press - Building a Better Government Web on October 24, 2009 at 5:44 am

    [...] 10 Incredible JQuery Navigation Menus [...]

  18. By 10 incredible JQuery navigation menus | meshdairy on October 29, 2009 at 9:09 am

    [...] Get 20% off on the MyHomePro Premium WordPress Theme by using this exclusive code: wpcats20.10 incredible JQuery navigation menus [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting

  • Click to subscribe!
  • Smashing Network
  • Hosted by VPS.net and Akamai CDN
WordPress Appliance - Powered by TurnKey Linux