Menus are one of the simplest user interfaces. Menus provide easy yet simple navigation option. So here I will provide you with my hand-picked colelction of best jQuery Menu Tutorials that will help you to design and create menus in jQuery.

1.  jQuery Pop-up Menu Tutorial

Ok, so I’ve had some time to play with jQuery, and whipped up a quick DHTML pop-up link menu (mouse over menu). Let’s get started.

2. Horizontal Scroll Menu with jQuery Tutorial

Create a horizontal scroll menu that scroll automatically according to your mouse axis-Y movement. This tutorial will cover some jquery tips, tricks, and plugin.

3. Create an Attractive jQuery Menu with Fadein and Fadeout Effect

We will be learning how to create an attractive menu with more advanced CSS and simple jQuery script. It uses jQuery builtin fadein and fadeout effect.

4. Color Fading Menu with jQuery

Hello, I am Liam Goodacre, and Chris has asked me to write a short jQuery tutorial on how to achieve fading hover effects. I will demonstrate how to perform colour and image merging. We will be using jQuery and the jQuery Colour plugin.

5. Sliding Jquery Menu

Hi there welcome to another tutorial, in this tutorial il show you how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.

6. 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 ... but we'll do it in jQuery! 

7. Create an apple style menu and improve it via jQuery

Since the Apple-flavored Leopard-text-indent style is currently one of my favorite menu styles, we will start from scratch and build such a menu in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery.

8. Animated Menus Using jQuery

I recently stumbled upon Dragon Interactive (dragoninteractive.com).  It’s a pretty well designed site.  However, the pièce de résistance is their rather cool animated menu.  Now…  had this been designed in Adobe Flash, I wouldn’t had paid much attention.  A closer inspection revealed that the menu is plain XHTML, CSS and Javascript.  Today, I’m going to show you how to create an animated menu (very similar to Dragon Interactive’s menu).

9.  LavaLamp for jQuery lovers!

As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”. Capturing their attention right there is something that we always strive for, and I guess LavaLamp is a step in that direction. Before you get bored with all this useless talk, let me get you started on integrating LavaLamp into your jQuery powered site.

10. Sliding Top Menu With jQuery

Sliding menus are very effective in areas where we have limited space. Here I will teach you to create a sliding top menu built with jQuery which can be fired through the open & close buttons or with any tag with the related class name. You can also use it as an info box, login area & more.

11. Make a Mega Drop-Down Menu with jQuery

SitePoint’s Craig Buckler blogged yesterday about what he sees as the next big thing in web design: mega drop-down menus. They’re cropping up everywhere, and now that usability guru, Jakob Nielsen thinks they’re quite good, you can expect to see even more of these very soon. Here’s what he had to say about this new trend: Given that regular drop-down menus are rife with usability problems, it takes a lot for me to recommend a new form of drop-down. But, as our testing videos show, mega drop-downs overcome the downsides of regular drop-downs. Thus, I can recommend one while warning against the other.

12. jQuery Cascading Menu Tutorial

A cascading menu is a navigation technique that can add a lot of style to any website. Without flash, you can create a flash-like navigation system that is not only fun to look at and use, but is also functional and organized. We will be creating a very ugly cascading menu for this tutorial.

13. Create a Vertical Scrolling Menu with CSS and jQuery

After creating a horizontal scrolling menu, I received a lot of responses from people who wanted vertical version of the same menu. So here it is, a fully reworked menu, with some new features, like text tooltips and loading message. As always this menu works in all major browsers and degrades gracefully when JavaScript is turned off. And thanks to Flashtory for the inspiration; I basically rewrote their flash menu with the jQuery.

14. Horizontal Scrolling Menu made with CSS and jQuery

There are a lot of cool flash scrolling menus out there, for example this or this one. But I decided to make a similarly looking menu with just CSS and jQuery. I couldn’t achieve the same smoothness in animation, but anyway I’m really satisfied with the result. My menu works fine in all major browsers and degrades gracefully when Javascript is turned off.

15. Slide and hide section with jquery

Learn to create a Slide and hide section with jquery.

16. Create a smooth tabbed menu in jQuery

In this case, we are going to learn how to create a smooth tabbed menu with our lovely jQuery library. With simple and clean layout we can have a great tabbed menu for our websites.

17.  State-Saving jQuery Accordion Menu Without Reloading the Page

After finding jQuery, I fell in love with it's ease of use and relatively small code footprint. When I set out to create this site, I wanted something that: used the entire page, scaled well, looked nice, degraded gracefully and was SEO friendly. What I found was jQuery's accordion menu. You may recognize the second example (#list1b) as a smaller version of my Portfolio; however, I wanted to tweak it (of course) and make it so each section housed my page copy and could be bookmarked and re-accessed without having to re-click on that section. I also completely re-styled the menu with a CSS file but that is beyond this tutorial.

18.How to Make a Smooth Animated Menu with jQuery

Ever seen some excellent jQuery navigation that left you wanting to make one of your own? Today we’ll aim to do just that by building a menu and animate it with some smooth effects.

19. Simple Lava Lamp Menu Tutorial with jQuery

I've break it into different sections, in depth explanations with text, illustrations and examples. Also, a little bit of style guide to create a unique lava menu for your own website. It supports styling, different animation transitions and it's so simple!

20. Sliding menu using jQuery

Today we will be building a sleek menu using jquery and some styles. What’s beautiful about jquery is how you can change a few bits and you get an entirely new effect. Last time we built some rollovers and tooltips using jquery and this time we’ll be building our slide menu on top of the same code. This tutorial assumes that you have a basic knowledge of jquery. Before we start, you might want to go ahead and try our example of sliding menus using jquery.