13 Excellent Tutorials On Creating jQuery Navigation Menu
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
In this post I’ve selected 13 jQuery navigation menu tutorials that you can learn from them how to impalement your own jQuery based navigation and have some great effects.
Before getting stared you maybe interested in looking my post about making navigation menu using CSS and Adobe Photoshop.
[13 hand-picked Vertical and horizontal CSS Menus]
1- How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery
As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I’ve always liked the way the menu on MooTools worked. So in this tutorial we’ll recreate that same effect.

2- How to make accordion menu using jquery
In this post I’ll show you how can you create fancy accordion menu using jQuery. In this post, you’ll see two examples of accordion. First menu’s visibility get’s toggled on clicking on the header while the another menu’s visibility get’s toogled when mouse is moved over it.
3- jQuery idTabs
4- Create a multilevel Dropdown menu with CSS and improve it via jQuery
5- Using jQuery for Background Image Animations
6- jQuery & CSS Example - Dropdown Menu
This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.
7- Create an apple style menu and improve it via jQuery
8- Creating a Floating HTML Menu Using jQuery and CSS
9- Drop down menu with jquery
Here’s a drop down animated menu example made with jquery.js 1.2.2
10- Jquery Vertical Slide (Dropdown) Navigation
11- Multi-level drop down menu with jQuery
There are a lot of horizontal drop menus around the web today and they are becoming more and more popular. If you have ever seen these menus and wondered how they work, then today is your lucky day! Here I will be discussing my thoughts as I build a drop down menu from scratch and add some jQuery to it to make it just that little bit more unique and special.
12- Seven jquery plugin to build lovely menu
13- Superfish - “menu jQuery plugin”
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript).
Popularity: 90% [?]
Join RSS Feed
Photoshop
Add News














5:23 pm on December 2nd, 2008
thanks for including my accordion menu……….cheers……
1:37 am on December 3rd, 2008
Nice list. Back then I was using Prototype like everyone else but then JQuery along and I know that its going to be my javascript framework. Thank you.
8:44 am on December 3rd, 2008
Hi,I never used Jquery in web developement.Thanks for providing this information.Thanks.
8:56 am on December 3rd, 2008
Thanks! Great list. I would also recommend http://www.IzzyMenu.com - free CSS menu builder with jQuery animation included.
5:34 pm on December 3rd, 2008
I love the ‘Mootools inspired’ navigation menu. Why not just use mootools then? It’s more fun to code in anyway.
6:52 pm on December 3rd, 2008
I’ve tried most of these menu scripts - the only one I’d recommend is Superfish, but even that is a bit bloated for instances when you require a simple, single-level drop-down menu.
1:58 pm on December 4th, 2008
Cool stuff.
Thanks for the tutorials.
I like the superfish one. Looks nice and elegant
6:28 pm on December 27th, 2008
Just what i was looking for, thanks!
3:17 pm on December 30th, 2008
thank you, great to see mine in the list
hope ppls love it
8:50 am on January 30th, 2009
adding up cialis pasquil
9:25 am on January 30th, 2009
adding up cialis feigned
6:18 am on February 16th, 2009
thanks for sharing these menus.
9:22 am on March 11th, 2009
Great jQuery menu examples! Thank you
10:27 am on April 17th, 2009
It works fine on my version of Firefox 1.5.0.1 Perhaps you don’t have the latest version. I run an image gallery myself, but I don’t think type of layout would art? work very well for me as I have descriptions for my images and some of the images are quite large. I don’t know, it might be worth experimenting with.
6:28 pm on April 22nd, 2009
Great stuff! I love the Mootol and Apple style menus!
JQuery is really powerful.
10:53 am on April 28th, 2009
Great article! Thanks…
7:23 am on June 6th, 2009
Thank you … this has me hery helped. That superfish menu is realy very nice.