15 Really Amazing jQuery Navigation Menu – Tutorials & Scripts

JQuery is a most useful component that can giving your visitor unique experience in a variety of ways, like image sliders, show your twitter stream, image galleries, navigation menu and contact forms.

15 Really Amazing jQuery Navigation Menu

In this post you’ll find 15 really amazing jQuery navigation menu in tutorials and premium scripts, which will help you to create a navigation menu of your dreams.

jQuery Image Gallery Plugins

Tutorials of Amazing jQuery Navigation Menu

Rocking and Rolling Rounded Menu with jQuery

15 Really Amazing jQuery Navigation Menu

by Mary Lou
In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box.

Tutorial Demo

Halftone Navigation Menu With jQuery & CSS3

15 Really Amazing jQuery Navigation Menu

by Martin Angelov
Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

Tutorial Demo

Beautiful Slide Out Navigation- A CSS and jQuery Tutorial

15 Really Amazing jQuery Navigation Menu

by Mary Lou
Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect and using this technique can spare you some space on your website. The items will be semi-transparent which means that content under them will not be completely hidden.

Tutorial Demo

How To Create a Cool Animated Menu with jQuery

15 Really Amazing jQuery Navigation Menu

by Chris Spooner
In this tutorial we’ll be building a cool navigation list complete with a sliding hover effect. Learn how to build the concept in Photoshop, lay out the basic HTML elements, style everything up in CSS then tie it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design.

Tutorial Demo

Beautiful Background Image Navigation with jQuery

15 Really Amazing jQuery Navigation Menu

by Mary Lou
In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in different times, creating a really nice effect. The background image sliding direction from the list item in the middle will depend on which item the user was before: coming from the right, it will slide from the left and vice versa.

Tutorial Demo

Animated Navigation with CSS & jQuery

15 Really Amazing jQuery Navigation Menu

by Soh Tanaka
As I was checking out some flash sites for inspiration, I ran across a couple websites that had some nice navigation effects. I’m not a huge fan of wildly animated navs, but these had simple and elegant roll over effects that I liked. I decided to imitate the effect with CSS and jQuery, and would like to share this technique today.

Tutorial Demo

A Fresh Bottom Slide Out Menu with jQuery

15 Really Amazing jQuery Navigation Menu

by Mary Lou
In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.

Tutorial Demo

How to Make a Smooth Animated Menu with jQuery

15 Really Amazing jQuery Navigation Menu

by Zach Dunn
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.

Tutorial Demo

Overlay Effect Menu with jQuery

15 Really Amazing jQuery Navigation Menu

by Mary Lou
In this tutorial we are going to create a simple menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. The menu will stay white and a submenu area will expand. We will create this effect using jQuery.

Tutorial Demo

CSS Dock Menu

15 Really Amazing jQuery Navigation Menu

by Nick La
If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom.

Tutorial Demo

Little Boxes Menu with jQuery

15 Really Amazing jQuery Navigation Menu

by Mary Lou
Today we will create a menu out of little boxes that animate randomly when a menu item is clicked. The clicked menu item expands and reveals a content area for some description or links. When the item is clicked again, the boxes will come back, reconstructing the initial background image.

Tutorial Demo

Premium jQuery Scripts for Cute Menu Navigation

SV Animated Menu Pack 2

15 Really Amazing jQuery Navigation Menu

by SplitV
This is a set of 4 animated menu scripts. All are stand alone, requiring no external libraries or frameworks. They are extremely small at 1-2kb a piece uncompressed. If you compress them they are all closer to 1-1.5kb. These scripts make it possible to create great menus with flash like effects very easily.

Buy Now Demo

Nice Menu V1.0

15 Really Amazing jQuery Navigation Menu

by Alexandra1710
A new way to slide between 2 level huge menu.
easy to use, valid html and css code
works in all majors browsers
easy to plug and play script to your website / blog or gallery

Buy Now Demo

Super menu pack (10 menus)

15 Really Amazing jQuery Navigation Menu

by VanKarWai
Super menu pack is a collection of 10 cool menus, 5 in pure css and 5 using jQuery framework for customize or layout with your websites or applications and projects.

It’s perfect for anyone who wants to give a special touch to their designs or find a starting point. I tried to create a collection as varied as possible in style and appearance to give you choice. Thinking in design working with code.

Buy Now Demo

Cute Menu – 8 transitions pack

15 Really Amazing jQuery Navigation Menu

by arl1nd
Cute Menu is very simple to embed to your HTML code. It’s requirements are only JavaScript and CSS support.

Buy Now Demo

12 Comments to “15 Really Amazing jQuery Navigation Menu – Tutorials & Scripts”

Add Comments (+)

  1. These are really great tutorials! There are many different options so I can get just the effect I’m looking for.

  2. Great Collection. Thanks For Posting it

  3. Vallo says:

    Do you have any idea how we can apply these plugins into wordpress so that clients can update the images and text of the jquery navigations by themselves?

    Would appreciate if anyone can advise on that. :)

  4. Todd Skinner says:

    Great post, using the Jquery dock on my site, no my site looks like the Mac OSX operation system. Really was looking for something unique for a new design development site and plan using some more of the elements.

    Here is what the dock looks like with just a few changes to the CSS.
    Visizzle – Branding – Marketing

  5. sproweb says:

    great list, thanks for sharing!

  6. alovilla says:

    nice menus. thank you.

  7. Jeff says:

    Seriously wonderful resources on this page, thanks a lot for posting! Will bookmark your site and join mailing list for sure! Thanks again!

    Jeff

  8. Merle says:

    Very nice post. I just stumbled upon your weblog and wished to say that I’ve truly enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!

  9. Jai says:

    Is there anybody know from where I can get this navigation bar? http://www.iniyant.com/

  10. Paraz says:

    wow!!! its awesome.. your effort is really appreciable.. thank you…

  11. This is coooollll.. . . .. . .
    Thankyou very much ^^

Trackbacks/Pingbacks

  1. 15 Really Amazing jQuery Navigation Menu – Tutorials & Scripts | WebDevKungfu
  2. 200+ Awesome Got To Have Articles for We Designers and Developers - tripwire magazine
  3. 100 Must Read Articles For Web Designers And Developers In 2011 | stylishwebdesigner
  4. Sliding Menu using division | SeekPHP.com
  5. Best Collection of jquery navigation | makE oWn Website, Easy Learn!

Leave a Reply

 

Amazingly Beautiful WordPress Themes