10 incredible JQuery navigation menus

by Jean. 48 Comments -

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:

 

  • Pingback: 10 incredible JQuery navigation menus | Webs Developer

  • http://www.vhill.ru Roman

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

  • http://dynamicwp.net reza

    already used it in most of my themes…hehe

    dynamicdrive provide a lot of jquery based script for dropdown menu

  • Pingback: 10 incredible JQuery navigation menus « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

  • http://fwebde.com/ Eric B.

    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.

  • Pingback: 10 incredible JQuery navigation menus | TopRoundups

  • Pingback: links for 2009-09-07 .:: [aka щямукюшт] Ozver.in | Озверин

  • http://designawardsgallery.com/ Best CSS Gallery

    Cool menus, look really great

  • http://www.corydorning.com Cory

    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.

  • http://www.principalcomputers.com.au James Murdoch

    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 ?

  • Pingback: All Teched Up! « Caintech.co.uk

  • Pingback: 10 Incredible jQuery Navigation Menus | Choose Daily

  • http://webdevvote.com/Jquery/10_incredible_JQuery_navigation_menus webdevvote.com

    You are voted!
    Track back from WebDevVote.com

  • Pingback: A Round-Up of Super Javascript and jQuery Plugins | Design Reviver

  • http://dynamicwp.net reza

    @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

  • Pingback: links for 2009-09-08 « Mandarine

  • http://www.logobliss.com Logo Bliss

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

  • http://www.pricepuffin.co.uk Stu

    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.

  • Pingback: 10 Menus de navegación con jQuery | JR Blog

  • http://slackrmedia.com SuperMario290

    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

  • http://php-programming-tutorial.com Jonathan Bennett

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

  • Pingback: A Round-Up of Super Javascript and jQuery Plugins | Easy Street Interactive Blog

  • http://www.reliablewebhosting.us/ RWH

    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…

  • Nico

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

  • Pingback: Notable Tech Posts – 2009.09.13 | The Life of Lew Ayotte

  • Pingback: BlogoTips » 10 Navigatin menus with JQuery

  • http://www.pixmac.com Vitezslav Valka

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

  • http://walkcoast.co.uk/ Sarah

    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!

  • Pingback: 網站製作學習誌 » [Web] 連結分享

  • Pingback: 10 adet inanılmaz jQuery navigasyon menu… « wiki.laroouse

  • http://technosiastic.wordpress.com Shahriar Hyder

    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/

  • http://www.joyoge.com/ joyoge designers’ bookmark

    very nice menus, thanks for share..

  • Pingback: Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance « Technosiastic!

  • http://www.gregprogramming.com Greg

    @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

  • http://jeremynicoll.com Jeremy Nicoll

    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.

  • Pingback: 10 Tutoriais e demos de menus em JQuery | idealMind

  • http://www.lilbabes.com Nils

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

  • Pingback: Weekly Round-up ~ Oct 23, 09 Edition | ClearType Press - Building a Better Government Web

  • Pingback: 10 incredible JQuery navigation menus | meshdairy

  • http://www.juggle.com/hardware-and-software/software/-microsoft_visual_studio JQuery Fan

    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.

  • http://Ghosts-IT.com Radz Nguyen

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

  • JJ Lam

    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,

  • http://www.ooty.me ooty

    good collections of jquery menus

  • http://cuaryos.blogspot.com cuaryos

    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.

  • http://vegetarian-dishes.com/ Vegetarian Jen

    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

  • http://www.mostlyblack.com/sexhinam.com Laura Geisler

    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

  • http://mediachandler.com/ Media Chandler

    We have been looking for a good plugin so i can add a menu to my sidebar.. I am looking for rounded corners that will open submenu in a box on hover… I have found some css styles but I seem to have issue with them working in IE. Does anyone know a good WordPress plug-in that has some good options that you can tweak in the plugin?
    I do love” Lavalamp for JQuery lovers” is it possible to align this navigation vertical in the sidebar…?

  • http://www.linenlogon.co.za Yossi

    Well done on truly “Incredible” navigation menus. I like the multi-colored menu it is awesome. The trick is to take these menus and make them fit with your existing design. That is is the key… I am still struggling to get everything working together shooo!