Web Design Tutorials and Inspiration | Learn Photoshop Online | Creative Inspiration | Web Resources

35 Awesome jQuery Navigation Enhancing Plugin Tutorials

Posted on 28. Dec, 2009 by bmackler in Resources

One of the single most important elements on a website is the  navigation.  For a website to work properly the navigation needs to be laid out well, intuitive and most of all useful.  In the past when you wanted to do anything interesting with your navigation it took complex programming languages or Flash to achieve, today that is different.  jQuery is an excellent choice for creating dynamic, exciting navigation without all the hours of programming.  Check out these 35 awesome jQuery plugins for creating the perfect website navigation. Check out the demos and download the already-built scripts and add them quickly and easily to your site.

Interested in more jQuery tutorials, take a look at jQuery image plugin tutorials

Puffer Fish Navigation
Rollover navigation with a glow

Tutorial

Example

Sexy Drop Down Menu with jQuery and CSS
How to create a sexy drop down menu that can also degrade gracefully.

Tutorial

Example

jQuery Simple Drop-Down Menu
Extremely simple drop-down menu. The peculiarity of this menu is that these 20 lines of code and absence of various cumbersome mouse events within html code.

Tutorial

Example

Fancy Navigation with jQuery
Rollover navigation with a glow. Has simple and elegant roll over effects

Tutorial

Example

iPod-style Drilldown and Flyout Menu
The iPod-style menu provides easy navigation of complex nested structures with any number of levels.

Tutorial

Example

Beautiful Slide Out Navigation
Gives a beautiful effect and using this technique can spare you some space on your website.

Tutorial

Example

jQuery Tabbed Interface / Tabbed Structure Menu Tutorial
Build your own tabbed Interface using jQuery with slideDown/slideUp effect.

Tutorial

Example

Fanciest Dropdown Menu You Ever Saw
Fancy and Stylized Dropdown Horizontal Navigation

Tutorial

Example

Superfish v1.4.8
Enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu

Tutorial

Example

Color Fading Menu with jQuery
CSS and jQuery powered rollover that alters the color of the button

Tutorial

Example

Simple and Beautiful jQuery Accordion Tutorial
Well-known javascript accordion with the most minimal amount of html, css, javascript code and of course, with a beautiful interface

Tutorial

Example

Slide and Hide Section Navigation
Create a slide and hide menu, where the menu items slide in and then hide themselves elegantly to give way for the selected menu item.

Tutorial

Example

Cool Animated Navigation with CSS and jQuery
Build a really cool animated navigation menu using just CSS and jQuery.

Tutorial

Example

jQuery UI Tabs
Simple jQuery powered tabbed navigation

Tutorial

Example

Kwicks Menu with jQuery
An apple style menu and improve it via jQuery

Tutorial

Example

Vertical Sliding Menu
Create a sliding menu button using jquery

Tutorial

Example

Mega Dropdown Navigation
Dropdown navigation with multiple links and lists

Tutorial

Example

Sliding JavaScript Menu Highlight
This sliding hover effect script is an easy method to add some flavor to your navigation.

Tutorial

Example

Create Vimeo-like top navigation
Create a curved drop down vertical navigation with curved edges.

Tutorial

Example

jQuery for Background Image Animations
Pull off various Background Effects in Your Navigation With This Tutorial

Tutorial

Example

Scrolling jQuery Menu
Vertical Scrolling Menu made with CSS and jQuery

Tutorial

Example

Navigation Effect Using jQuery
Simple sliding animation when you hover over each button

Tutorial

Example

Query (mb)Menu 2.7
Powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way

Tutorial

Example

Image Menu With Jquery
Image Driven Expanding Horizontal Navigation

Tutorial

Example

Animated Horizontal Menu
Horizontal Scroll Menu with jQuery that scrolls automatically according to your mouse axis-Y movement.

Tutorial

Example

jQuery plugin: Treeview
Lightweight and flexible transformation of an unordered list into an expandable and collapsable tree, great for unobtrusive navigation enhancements.

Tutorial

Example

Simple Accordian
There are a lot of scripts we have seen and sure you too would have seen them. This script is one of the smallest accordion script which is extremely simple and easy to integrate.

Tutorial

Example

Scrolling jQuery Menu
Horizontal Scrolling Menu made with CSS and jQuery

Tutorial

Example

Menu Fader
Fading Menu – Replacing Content

Tutorial

Example

A circular menu with sub menus
A follow on from the simple single level circular menu, this one adds a sub menu level of smaller icons in a circular pattern within the top level circle.

Tutorial

Example

Animated Drop Down Menu
Smooth Animated Menu using jQuery

Tutorial

Example

JQuery/CSS Dock Menu
This mac style navigation menu provides the user a clean, organized and animated interface for surfing a site’s content.

Tutorial

Example

Super slick jQuery menu with CSS3
Animated graphic menu that fades the inactive navigation.

Tutorial

Example

Sliding-Sliding Doors – Animated jQuery Menu
Animated menu with sliding rollover

Tutorial

Example

Tags: jquery, Resources, tutorials, web development