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)
2) JQuery/CSS Dock MenuThis 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
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
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
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
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
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/
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
9) MB menu 2.3The 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
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/
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
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/
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/
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/
15) Sliding Navigation with highlightThe 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/
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/
17) Floating MenuThe 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
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
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
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/
21) Jquery KwicksDemo: http://www.jeremymartin.name/examples/kwicks.php?example=1Tutorial: http://www.jeremymartin.name/projects.php?project=kwicks
22) Jquery Scroll MenuDemo: http://www.queness.com/resources/html/scrollmenu/index.htmlTutorial: http://www.queness.com/post/256/horizontal-scroll-menu-with-jquery-tutorial
23) SpriteMenu 2.0Demo: http://www.distinctcorp.com.au/jquery/spritemenu.html Tutorial: http://www.distinctcorp.com.au/jquery/spritemenu.html
24) Mega Dropdown MenuDemo: 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/
25) Floating Menu 2Demo: http://www.queness.com/resources/html/floatmenu/index.htmlTutorial: http://www.queness.com/post/762/create-a-nice-looking-floating-menu-with-jquery-easing
26) Color Fading MenuDemo: http://css-tricks.com/examples/ColorFadingMenu/Tutorial: http://css-tricks.com/color-fading-menu-with-jquery/
27) Keypress NavigationDemo: http://nettuts.s3.amazonaws.com/013_keypress/demo/demo.html#aboutTutorial: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-keypress-navigation-using-jquery/
28) Digg Style MenuDemo: http://css-tricks.com/examples/DiggHeader/#Tutorial: http://css-tricks.com/designing-the-digg-header-how-to-download/
29) JSlick MenuDemo: http://demo.marcofolio.net/slick_jquery_css3_menu/default.htmltutorial: http://www.marcofolio.net/webdesign/jslickmenu_a_jquery_plugin_for_slick_css3_menus.html
30) Fish Eye Style MenuDemo: http://www.jampmark.com/html+css-techniques-demos/pure-css-fish-eye-menu-demo.htmlTutorial: http://www.jampmark.com/html+css-techniques/pure-css-fish-eye-menu.html
31) Image MenuTutorial: http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/create_image_menu_with_jquery.htmlDemo: http://www.alohatechsupport.net/examples/image-menu-1.html
32) SuckerFish Style MenuDemo: http://be.twixt.us/jquery/suckerFish.php
Tutorial: http://be.twixt.us/jquery/suckerFish.php
33) Accordion Nav Script
Demo: http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm
Tutorial: http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm
34) UI Navigation TabsDemo: http://stilbuero.de/jquery/tabs_3/Tutorial:http://stilbuero.de/jquery/tabs_3/
35) BDC Drilldown Ipod Style MenuDemo: http://plugins.jquery.com/project/bdc-ddmenuTutorial: http://plugins.jquery.com/project/bdc-ddmenu
36) Bread Crumb NavDemo: http://plugins.jquery.com/project/jBreadCrumbTutorial:http://plugins.jquery.com/project/jBreadCrumb
37) JD MenuDemo: http://jdsharp.us/jQuery/plugins/jdMenu/Tutorial: http://jdsharp.us/jQuery/plugins/jdMenu/
38) Quick Find MenuDemo: http://labs.activespotlight.net/jQuery/menu_demo.htmlTutorial: http://labs.activespotlight.net/jQuery/menu_demo.html
39) Coda Slider Navdemo: http://www.ndoherty.biz/demos/coda-slider/1.1.1/Tutorial: http://www.ndoherty.biz/demos/coda-slider/1.1.1/
40) UvumiTools Drop Down menuDemo: http://uvumitools.com/dropdown.htmlTutorial:http://uvumitools.com/dropdown.html
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
September 30th, 2010 at 6:46 pm
Great Post!…
[…] I found your entry interesting thus I’ve added a Trackback to it on my weblog
[…]…