在这篇文章中，我为大家收集了40款非常棒的 jQuery 导航插件和教程。导航作为网站重要的组成部分，能够帮助用户找到他们想要的内容，因此导航设计的好坏决定了用户能够在你的网站停留更长的时间，浏览更多的内容。在下面的集合中，你会发现很多便利的 jQuery 导航插件和有用的教程，帮助你实现充满吸引力的网站导航，让你网站更有组织性和交互性。 [b][url=http://tutorialzine.com/2009/09/stylish-navigation-menu-jquery/]A Stylish Navigation Menu With jQuery[/url][/b] ( [url=http://demo.tutorialzine.com/2009/09/stylish-navigation-menu-jquery/]演示[/url] | [url=http://demo.tutorialzine.com/2009/09/stylish-navigation-menu-jquery/demo.zip]下载[/url] ) [url=http://tutorialzine.com/2009/09/stylish-navigation-menu-jquery/][img]http://files.jb51.net/file_images/article/201209/2012091402303958.jpg[/img] [/url]   [b][url=http://tutorialzine.com/2009/12/colorful-content-accordion-css-jquery/]Making a Fresh Content Accordion[/url][/b] ( [url=http://demo.tutorialzine.com/2009/12/colorful-content-accordion-css-jquery/demo.html]演示[/url] | [url=http://demo.tutorialzine.com/2009/12/colorful-content-accordion-css-jquery/demo.zip]下载[/url] ) [url=http://tutorialzine.com/2009/12/colorful-content-accordion-css-jquery/][img]http://files.jb51.net/file_images/article/201209/2012091402303959.jpg[/img] [/url]   [b][url=http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/]Create a Slick Tabbed Content Area using CSS & jQuery[/url][/b] ( [url=http://d2o0t5hpnwv4c1.cloudfront.net/001_Tabbed/site/jQuery.html]演示[/url] | [url=http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/]下载[/url] ) [url=http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/][img]http://files.jb51.net/file_images/article/201209/2012091402303960.jpg[/img] [/url]   [b][url=http://demo.tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/demo.html]Halftone Navigation Menu[/url][/b] ( [url=http://demo.tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/demo.html]演示[/url] | [url=http://tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/]下载[/url] ) [url=http://demo.tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/demo.html][img]http://files.jb51.net/file_images/article/201209/2012091402303961.jpg[/img] [/url]   [b][url=http://net.tutsplus.com/tutorials/javascript-ajax/a-different-top-navigation/]A Different Top Navigation[/url][/b] ( [url=http://d2o0t5hpnwv4c1.cloudfront.net/386_navigation/top-nav-demo/index.html]演示[/url] | [url=http://d2o0t5hpnwv4c1.cloudfront.net/386_navigation/top-nav-demo.zip]下载[/url] ) [url=http://net.tutsplus.com/tutorials/javascript-ajax/a-different-top-navigation/][img]http://files.jb51.net/file_images/article/201209/2012091402303962.jpg[/img] [/url]   [b][url=http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial]jQuery Tabbed Interface / Tabbed Structure Menu Tutorial[/url][/b] ( [url=http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html]演示[/url] | [url=http://www.queness.com/resources/archives/jquery-tab-menu.zip]下载[/url] ) [url=http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial][img]http://files.jb51.net/file_images/article/201209/2012091402303963.jpg[/img] [/url]   [b][url=http://net.tutsplus.com/tutorials/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/]Create a Cool Animated Navigation with CSS and jQuery[/url][/b] ( [url=http://d2o0t5hpnwv4c1.cloudfront.net/009_jQueryMenu/sm/result/index.html]演示[/url] | [url=http://d2o0t5hpnwv4c1.cloudfront.net/009_jQueryMenu/sm/result.zip]下载[/url] ) [url=http://net.tutsplus.com/tutorials/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/][img]http://files.jb51.net/file_images/article/201209/2012091402303964.jpg[/img] [/url]   [b][url=http://www.scriptiny.com/2008/05/vertical-flyout-javascript-menu/]Vertical Flyout JavaScript Menu[/url][/b] ( [url=http://www.scriptiny.com/wp-content/uploads/2008/05/flyout.zip]演示[/url] | [url=http://www.scriptiny.com/wp-content/uploads/2008/05/flyout.zip]下载[/url] ) [url=http://www.scriptiny.com/2008/05/vertical-flyout-javascript-menu/][img]http://files.jb51.net/file_images/article/201209/2012091402303965.jpg[/img] [/url]   [b][url=http://net.tutsplus.com/tutorials/html-css-techniques/use-sprites-to-create-an-awesomeness-filled-navigation-menu/]Use Sprites to Create an Awesomeness-Filled Navigation Menu[/url][/b] ( [url=http://d2o0t5hpnwv4c1.cloudfront.net/512_dragon/demo/index.html]演示[/url] | [url=http://d2o0t5hpnwv4c1.cloudfront.net/512_dragon/demo/demo.zip]下载[/url] ) [url=http://net.tutsplus.com/tutorials/html-css-techniques/use-sprites-to-create-an-awesomeness-filled-navigation-menu/][img]http://files.jb51.net/file_images/article/201209/2012091402303966.jpg[/img] [/url]   [b][url=http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/]How to Make a Smooth Animated Menu with jQuery[/url][/b] ( [url=http://buildinternet.com/live/smoothmenu/animated-menu.html]演示[/url] | [url=http://buildinternet.com/live/smoothmenu/animated-menu.zip]下载[/url] ) [url=http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/][img]http://files.jb51.net/file_images/article/201209/2012091402303967.jpg[/img] [/url]   [b][url=http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/]Dropdown Menu[/url][/b] ( [url=http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/]演示[/url] | [url=http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/]下载[/url] ) [url=http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/][img]http://files.jb51.net/file_images/article/201209/2012091402303968.jpg[/img] [/url]   [b][url=http://www.emanuelblagonic.com/2006/10/11/create-your-own-drop-down-menu-with-nested-submenus-using-css-and-a-little-javascript/]Drop down menu with Nested Submenus[/url][/b] ( [url=http://playground.emanuelblagonic.com/creating-nested-drop-down-menus/]演示[/url] | [url=http://www.emanuelblagonic.com/2006/10/11/create-your-own-drop-down-menu-with-nested-submenus-using-css-and-a-little-javascript/]下载[/url] ) [url=http://www.emanuelblagonic.com/2006/10/11/create-your-own-drop-down-menu-with-nested-submenus-using-css-and-a-little-javascript/][img]http://files.jb51.net/file_images/article/201209/2012091402303969.jpg[/img] [/url]   [b][url=http://css-tricks.com/simple-jquery-dropdowns/]Simple jQuery Dropdowns[/url][/b] ( [url=http://css-tricks.com/examples/SimplejQueryDropdowns/]演示[/url] | [url=http://css-tricks.com/examples/SimplejQueryDropdowns.zip]下载[/url] ) [url=http://css-tricks.com/simple-jquery-dropdowns/][img]http://files.jb51.net/file_images/article/201209/2012091402303970.jpg[/img] [/url]   [b][url=http://line25.com/wp-content/uploads/2011/animated-menu/demo/index.html]Create a Cool Animated Menu with jQuery[/url][/b] ( [url=http://line25.com/wp-content/uploads/2011/animated-menu/demo/index.html]演示[/url] | [url=http://line25.com/tutorials/how-to-create-a-cool-animated-menu-with-jquery]下载[/url] ) [url=http://line25.com/wp-content/uploads/2011/animated-menu/demo/index.html][img]http://files.jb51.net/file_images/article/201209/2012091402303971.jpg[/img] [/url]   [b][url=http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/examples/]Mega Vertical[/url][/b] ( [url=http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/examples/]演示[/url] | [url=http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/getting-started/]下载[/url] ) [url=http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/examples/][img]http://files.jb51.net/file_images/article/201209/2012091402303972.jpg[/img] [/url]   [b][url=http://www.codebrewery.ch/memu/sample.html]Memu[/url][/b] ( [url=http://www.codebrewery.ch/memu/sample.html]演示[/url] | [url=http://codebrewery.blogspot.com/2011/01/memu-simple-css-javascript-jquery-menu.html]下载[/url] ) [url=http://www.codebrewery.ch/memu/sample.html][img]http://files.jb51.net/file_images/article/201209/2012091402303973.jpg[/img] [/url]   [b][url=http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/]Sweet AJAX Tabs With jQuery 1.4 & CSS3[/url][/b] ( [url=http://demo.tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/demo.html]演示[/url] | [url=http://demo.tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/demo.zip]下载[/url] ) [url=http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/][img]http://files.jb51.net/file_images/article/201209/2012091402303974.jpg[/img] [/url]   [b][url=http://net.tutsplus.com/tutorials/javascript-ajax/building-a-better-blogroll-dynamic-fun-with-simplepie-and-jquery/]Building a Better Blogroll[/url][/b] ( [url=http://d2o0t5hpnwv4c1.cloudfront.net/036_BetterBlogRoll/sourceFiles/index.html]演示[/url] | [url=http://d2o0t5hpnwv4c1.cloudfront.net/036_BetterBlogRoll/sourceFiles.zip]下载[/url] ) [url=http://net.tutsplus.com/tutorials/javascript-ajax/building-a-better-blogroll-dynamic-fun-with-simplepie-and-jquery/][img]http://files.jb51.net/file_images/article/201209/2012091402303975.jpg[/img] [/url]   [b][url=http://tympanus.net/codrops/2010/06/07/fancy-sliding-form-with-jquery/]Fancy Sliding Form with jQuery[/url][/b] ( [url=http://tympanus.net/Tutorials/FancySlidingForm/]演示[/url] | [url=http://tympanus.net/Tutorials/FancySlidingForm/FancySlidingForm.zip]下载[/url] ) [url=http://tympanus.net/codrops/2010/06/07/fancy-sliding-form-with-jquery/][img]http://files.jb51.net/file_images/article/201209/2012091402303976.jpg[/img] [/url]   [b][url=http://tympanus.net/codrops/2010/05/18/little-boxes-menu-with-jquery/]Little Boxes with jQuery[/url][/b] ( [url=http://tympanus.net/Tutorials/LittleBoxesMenu/]演示[/url] | [url=http://tympanus.net/Tutorials/LittleBoxesMenu/LittleBoxesMenu.zip]下载[/url] ) [url=http://tympanus.net/codrops/2010/05/18/little-boxes-menu-with-jquery/][img]http://files.jb51.net/file_images/article/201209/2012091402303977.jpg[/img] [/url]   [b][url=http://www.gethifi.com/blog/autosprites-jquery-menu-plugin]AutoSprites – A jQuery Menu Plugin[/url][/b] ( [url=http://files.www.gethifi.com/posts/autosprites/index.html]演示[/url] | [url=http://files.www.gethifi.com/posts/autosprites/autosprites.zip]下载[/url] ) [url=http://www.gethifi.com/blog/autosprites-jquery-menu-plugin][img]http://files.jb51.net/file_images/article/201209/2012091402303978.jpg[/img] [/url]   [b][url=http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/]Creating a Floating HTML Menu Using jQuery and CSS[/url][/b] ( [url=https://d2o0t5hpnwv4c1.cloudfront.net/018_Floating_Menu/demo/dhtml_float_menu_final_nettut.html]演示[/url] | [url=https://d2o0t5hpnwv4c1.cloudfront.net/018_Floating_Menu/code-floating-menu.zip]下载[/url] ) [url=http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/][img]http://files.jb51.net/file_images/article/201209/2012091402303979.jpg[/img] [/url]   [b][url=http://www.script-tutorials.com/css3-multicolor-menu/]CSS3 multicolor menu[/url][/b] ( [url=http://www.script-tutorials.com/demos/232/index.html]演示[/url] | [url=http://www.script-tutorials.com/demos/232/source.zip]下载[/url] ) [url=http://www.script-tutorials.com/css3-multicolor-menu/][img]http://files.jb51.net/file_images/article/201209/2012091402303980.jpg[/img] [/url]