Below is a list of tutorials that teach how to use jQuery when building different navigation menus, but before you start exploring the tutorials, why don’t you learn what jQuery is about.
And now feel free to check the tutorials. Note: each tutorial featured below comes with a live demo and clear guidelines.
The tutorial provides tips on how to create an original navigation menu that would work in the following way: the menu item would grow when you hover the cursor over it.
It’s more a tool than a tutorial, but it allows you to have a stunning navigation menu that every Mac fan would like.
If you like image menus, then you’ll be excited to know that such navigation menus can now be created with jQuery.
If you don’t like websites with annoying navigation, then this tutorial is exactly for you; it teaches how to create a stylish slide out navigation menu. This menu you can create with this guide is really original because the menu buttons are almost invisible. The visitors have to hover over the area next to the navigation menu in order to choose the button they’d like to click. This menu is great if you want the navigation to take minimal space on the website.
This is the kind of tutorial that makes it easy for you to create an animated navigation menu.
This is another tutorial that will teach you how to build a stunning navigation menu. This time you’ll learn what it takes to make the fading effect when it comes to menu items.
Follow this tutorial and learn how to build a sliding menu that looks simple but still has something special.
This tutorial explains how to make a simple dropdown menu.
And this is how to create a mega dropdown menu that doesn’t look too busy.
If you’d like to learn how to create an animated navigation menu without using Flash, then give this tutorial a try. It’ll teach you how to create simple and elegant roll over effects.
Learn how to create a Fisheye Menu, an expanding menu based on the MacOSX doc.
This tutorial will show you how to create a floating navigation menu. Make sure you scroll the live demo page to see why this navigation menu is so special. In short, whether you scroll to the top or the bottom of the page the navigation menu will follow the cursor.
This tutorial explains how to create a beautiful navigation menu that would scroll horizontally.
And this tutorial teaches how to create an eye-catching navigation menu that would scroll vertically.
This guide provides tips on how to create a navigation menu that would slide horizontally (right to left). One would call this menu a drop left menu.
Learn what it takes to make a sliding menu button using jQuery. Such a button could be a sample of a vertical sliding menu.
Find out how to create a floating navigation menu so that the menu item you click rises above the others.
This is an example of a neat sliding menu and of course tips on how to create it with jQuery.
The title of the tutorial speaks for itself and the final result will impress you!
If you are a fan of tabs, then you’ll enjoy this tutorial because it teaches the basic tasks needed to build a tabbed navigation menu using jQuery.
This is another guide on building a tabbed navigation menu. It’ll be a perfect solution for those who like clean and lightweight interfaces.
This tutorial offers a technique that will give you a stylish animated menu.
If you follow this tutorial you’ll end up with an awesome navigation menu. The menu will work in the following way: when the visitor rolls over the menu item, a fancy icon will appear.
Learn how easy it is to build a lava-lamp style menu.
This tutorial provides tips on how to build an unusual navigation menu – when the visitor rolls over the menu button it’ll move up and show an additional info. This way the visitor will know if he/she should visit the page or not.
We’ve already listed a few tutorials on drop down menus. So, why don’t you read how to create a “drop up” menu?
This tutorial will be of interest to those of you who prefers small navigation menus. In short, it’ll teach you how to create a stylish accordion menu.
This is one more awesome tutorial that introduces the power of jQuery. It proves that navigation menus shouldn’t look boring and can be displayed in an original way.
This is the guide that’ll help you to create an animated navigation bar.
We hope you’ll find these tutorials helpful and in case you are looking for some inspiration before you decide what navigation menu would work best for your website, feel free to read the post entitled jQuery Navigation Solutions – Spectacular and Dynamic.