Powerful jQuery Navigation Plugins and Tutorials

jQuery navigation plugins can help spice up any website, as well as helping to keep content more organized and intuitive for the user.  Drop down and branched menus are among the most popular types of jQuery nav menus, but there’s also slide out menus and animated menus that are possible as well.

In this collection, we’ve gathered up some powerful jQuery navigation plugins and jQuery navigation tutorials for you to use in your projects.

If you are looking for more free jQuery plugins, check out these posts:

Beautiful Slide Out jQuery Navigation

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.

jquery 1 500x263

Sexy Drop Down jQuery Menu with CSS

Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.

jquery 2 500x291

Create the Fanciest Dropdown You Ever Saw

After speaking with Brian, he agreed to write a tutorial for us on how he created  his website navigation menu.  Recently he has changed his website design and the layout, but this tutorial is sweet, and one amazing navigation

jquery 3 500x138

Mega Drop Down Menu with CSS and jQuery

While in the process of redesigning 4wheelparts.com, I decided to explore new methods of working with our huge number of inventory and categories. I did some research and noticed a new trend for ecommerce sites in having what they call “mega drop down menus”.

jquery 4 500x280

Animated Drop Down Menu with jQuery

Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.

jquery 5 500x235

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.

jquery 6

Designing the Digg Navigation

The design of Digg is full of smart ideas. The site identity is strong but doesn’t take up too much valuable vertical space. Navigation is compacted with the use of simple drop-down menus. Important things like subscribing, searching and account information are right up top where you would expect them to be. It’s fluid width, but it doesn’t shrink too far or grow too big.  Let’s design the Digg header!

jquery 7

Create an Out of the Box jQuery Navigation

Just about every website uses the regular navigation concepts we’re all used to. After awhile this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn’t new, it’s certainly not common.

jquery 8

Lavalamp for jQuery

Hover above and feel for yourself, the nifty effect of Lava Lamp. What you just experienced is nothing but the LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. I personally believe that the effect rivals that of flash – Don’t you? Especially considering the fact that it is extremely light weight.

jquery 9

Create a Mootools Inspired Homepage 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!

jquery 10

One Response to “Powerful jQuery Navigation Plugins and Tutorials”
  1. Web Design Dubai September 20, 2011

Leave a Reply

Your email address will not be published. Required fields are marked *