Top 40 Jquery for Web Design: Navigation

We love Jquery here and use it a lot. Here’s our breakdown of ALL the jQuery options available today. Feel free to add more that you find in our comment section.

1) Tabbed side menu:

Many websites such as WordPress use tabbed navigation to easily sort through a site’s content while saving space.

Tutorial: (http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial

Demo: (http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html)

JQTabbedMenu

2) 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: http://www.ndesign-studio.com/blog/design/css-dock-menu/

Demo: http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html

JQDockmenu

3) Animated menu:

This menu was created using a combination of XHTML, CSS and Javascript:

Tutorial: http://www.shopdev.co.uk/blog/animated-menus-using-jquery/

Demo: http://www.shopdev.co.uk/blog/menuDemo.html

JQAnimated1

4) Animated menu two:

This animated menu provides flash-like movements to the page-links. The menu was created using a combination of JQuery and CSS.

Tutorial: http://net.tutsplus.com/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/

Demo: http://nettuts.s3.amazonaws.com/009_jQueryMenu/sm/result/index.html

JQAnimated2

5) ListNav Menu:
The ListNav menu is a letter-based, Craig’s list style navigation system customizable via CSS.
Tutorial: http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx
Demo: http://www.ihwy.com/Labs/Demos/Current/jquery-listnav-plugin.aspx

JQListNav

6) SlidingNav menu:

The Sliding Nav menu allows multiple links to be contained within one button. This is especially useful for websites with large amounts of content.

Tutorial: http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/

Demo: http://www.hv-designs.co.uk/tutorials/sliding_menu/sliding_menu.html

JQSlideNav

7) Fading Menu:

The Fading menu is an example of how to use CSS with JQuery to create a clean and simple navigation for Web 2.0.

Tutorial: http://css-tricks.com/learning-jquery-fading-menu-replacing-content/

Demo: http://css-tricks.com/examples/MenuFader/

JQNavFade

8 ) Animated menu three:

This animated menu provides flash-like movement and interactivity to your navigation using the “easing” function of JQuery.

Tutorial: http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/

Demo: http://buildinternet.com/live/smoothmenu/animated-menu.html

JQNavAnimated3

9) MB menu 2.3

The Jquery MB menu is another good example of a drop menu capable of organizing a large number of sub-categories. Categories can be multi-level or contextual (right click).

Tutorial: http://pupunzi.open-lab.com/2009/01/18/mbmenu/

Demo: http://www.open-lab.com/mb.ideas/index.html#mbMenu

JQNavMB

10) Lavalamp menu:

The Lavalamp menu is a simple navigation with an animated, flash-like slider.

Tutorial: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

Demo: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

JQNavLavaLamp

11) Animated drop down menu:

This drop-down menu uses a combination of JQuery and CSS to neatly organize multiple sub-sections. This is convenient for organizing large amounts of content on a site.

Tutorial: http://www.clarklab.net/blog/posts/animated-drop-down-menu-with-jquery/

Demo: http://clarklab.net/blog/articles/dropdown/example.html

JQNavAnim.DropDown

12) MooTools style Navigation effect:

This attractive JQuery effect slides the navigation bar onto the page on load.

Tutorial: http://net.tutsplus.com/html-css-techniques/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/

Demo: http://net.tutsplus.com/html-css-techniques/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/

JQNavMooTools

13) MenuMatic:

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. Created by Patrick Griffiths and Dan Webb.

Tutorial: http://greengeckodesign.com/?q=menumatic

Demo: http://greengeckodesign.com/projects/menumatic/examples/horizontal/

JQNavMenuMatic

14) Garage style menu:

The Garage style menu uses JQuery to animate each button revealing information to the user when passed over with the mouse.

Tutorial: http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/

Demo: http://www.gayadesign.com/scripts/jquerygaragedoor/

JQNavGarageDoor

15) Sliding Navigation with highlight

The sliding navigation adds a flash-like movement to the menu with a highlight which follows the users movement. This menu can be easily customized using CSS.

Tutorial: http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/

Demo: http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/

JQNavSliding