hide me

Top 40 Jquery for Web Design: Navigation

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


16) Simple drop down menu:

This menu is simple to create yet powerful when organizing sub-menus and categories. The drop-down is created with JQuery and styled with CSS.

Tutorial: http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/

Demo: http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/

JQNavDropDown


17) Floating Menu

The JQuery floating menu moves over content as the user scrolls up or down the page.

Tutorial: http://net.tutsplus.com/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/

Demo: https://nettuts.s3.amazonaws.com/018_Floating_Menu/demo/dhtml_float_menu_final_nettut.html

JQNavFloatingMenu


18) Top Nav Menu:

The JQuery Top Nav Menu is a navigation bar which shows it’s sub-categories on the top when rolled over.

Tutorial: http://net.tutsplus.com/tutorials/javascript-ajax/a-different-top-navigation/

Demo: http://nettuts.s3.amazonaws.com/386_navigation/top-nav-demo/index.html

JQNavTopNav


19) JQUERY Apple Style Menu:

The Apple Style Menu tutorial takes you step-by-step into the creation of a sliding “leopard flavor” navigation.

Tutorial: http://www.kriesi.at/archives/apple-menu-improved-with-jquery

Demo: http://www.kriesi.at/wp-content/extra_data/kwicks_tutorial/kwicks_final.html

JQNavKwiks


20) JQUERY Fancy Rollover:

The JQuery Fancy rollover displays a subtle flash like ease motion when the menu item is selected.

Tutorial: http://www.sohtanaka.com/web-design/animate-navigation-with-css-jquery/

Demo: http://www.sohtanaka.com/web-design/examples/fancy-navigation/

JQNavFancyRollover


21) Jquery Kwicks

Demo: http://www.jeremymartin.name/examples/kwicks.php?example=1

Tutorial: http://www.jeremymartin.name/projects.php?project=kwicks

JQNavKwicks


22) Jquery Scroll Menu

Demo: http://www.queness.com/resources/html/scrollmenu/index.html

Tutorial: http://www.queness.com/post/256/horizontal-scroll-menu-with-jquery-tutorial

JQNavScrollMenu


23) SpriteMenu 2.0

Demo: http://www.distinctcorp.com.au/jquery/spritemenu.html

Tutorial: http://www.distinctcorp.com.au/jquery/spritemenu.html


JQNavSpriteMenu


24) Mega Dropdown Menu

Demo: http://www.sitepoint.com/blogs/2009/03/31/make-a-mega-drop-down-menu-with-jquery/

Tutorial: http://www.sitepoint.com/blogs/2009/03/31/make-a-mega-drop-down-menu-with-jquery/


JQNavMegaDropdown


25) Floating Menu 2

Demo: http://www.queness.com/resources/html/floatmenu/index.html

Tutorial: http://www.queness.com/post/762/create-a-nice-looking-floating-menu-with-jquery-easing

JQNavFloating2


26) Color Fading Menu

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

Tutorial: http://css-tricks.com/color-fading-menu-with-jquery/


JQNavColorFade


27) Keypress Navigation

Demo: http://nettuts.s3.amazonaws.com/013_keypress/demo/demo.html#about

Tutorial: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-keypress-navigation-using-jquery/

JQNavKeypress


28) Digg Style Menu

Demo: http://css-tricks.com/examples/DiggHeader/#

Tutorial: http://css-tricks.com/designing-the-digg-header-how-to-download/


JQNavDigg


29) JSlick Menu

Demo: http://demo.marcofolio.net/slick_jquery_css3_menu/default.html

tutorial: http://www.marcofolio.net/webdesign/jslickmenu_a_jquery_plugin_for_slick_css3_menus.html

JQNavSlickMenu


30) Fish Eye Style Menu

Demo: http://www.jampmark.com/html+css-techniques-demos/pure-css-fish-eye-menu-demo.html

Tutorial: http://www.jampmark.com/html+css-techniques/pure-css-fish-eye-menu.html

JQNavFishEye


31) Image Menu

Tutorial: http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/create_image_menu_with_jquery.html

Demo: http://www.alohatechsupport.net/examples/image-menu-1.html


JQNavImageMenu



32) SuckerFish Style Menu

Demo: http://be.twixt.us/jquery/suckerFish.php

Tutorial: http://be.twixt.us/jquery/suckerFish.php

JQNavSuckerFish


33) Accordion Nav Script


Demo: http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm

Tutorial: http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm

JQNavAccordionMenu


34) UI Navigation Tabs

Demo: http://stilbuero.de/jquery/tabs_3/

Tutorial:http://stilbuero.de/jquery/tabs_3/

JQNavUITabs


35) BDC Drilldown Ipod Style Menu

Demo: http://plugins.jquery.com/project/bdc-ddmenu

Tutorial: http://plugins.jquery.com/project/bdc-ddmenu

JQNavBDCDrilldown


36) Bread Crumb Nav

Demo: http://plugins.jquery.com/project/jBreadCrumb

Tutorial:http://plugins.jquery.com/project/jBreadCrumb

JQNavBreadCrumb


37) JD Menu

Demo: http://jdsharp.us/jQuery/plugins/jdMenu/

Tutorial: http://jdsharp.us/jQuery/plugins/jdMenu/

JQNavJDMenu


38) Quick Find Menu

Demo: http://labs.activespotlight.net/jQuery/menu_demo.html

Tutorial: http://labs.activespotlight.net/jQuery/menu_demo.html

JQNavQuickFind


39) Coda Slider Nav

demo: http://www.ndoherty.biz/demos/coda-slider/1.1.1/

Tutorial: http://www.ndoherty.biz/demos/coda-slider/1.1.1/

JQNavCodaSLider


40) UvumiTools Drop Down menu

Demo: http://uvumitools.com/dropdown.html

Tutorial:http://uvumitools.com/dropdown.html

JQNavUvumiTools


Related Articles:
36 Eye-Catching Jquery Navigation Menus
25 jQuery Tutorials for Improved Navigation Menus
10 Fresh jQuery Tutorials to Enhance Navigation Menus
26 jQuery Plugins for Superb Navigation
10 incredible JQuery navigation menus
“Outside the Box” Navigation with jQuery
25 jQuery Plugins for Navigation
13 excellent tutorials on creating jquery navigation menu
15 Excellent jQuery Navigation Techniques and Solutions
8 Sites with Excellent jQuery Navigation
50+ Amazing Jquery Examples- Part1
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials
Animated Navigation with CSS & jQuery
Outstanding jQuery Navigation Menu Tutorials
5 Examples of jQuery Navigation at its Very Best
11 New jQuery Navigation Solutions
15 Best jQuery Navigation Plugins

  • Theloop
  • The BPDS newsletter