推荐15个jQuery Menu插件和教程指南

     下面介绍的这些菜单，有网站/系统导航菜单，有右键菜单等。菜单是我们在开发Web应用系统和网站常用到的控件。现在为大家介绍一些基于    <a href="http://www.open-open.com/ajax/jquery.htm">jQuery</a>开发的菜单，希望大家能够喜欢。    <h2><a href="/misc/goto?guid=4958184553467702936">naviDropDown 1.0 Plugin</a></h2>    <p><a href="/misc/goto?guid=4958184553467702936"><img title="jq_menu_01.jpg" border="0" alt="jq_menu_01.jpg" src="https://simg.open-open.com/show/541b5685abcacf93f1284a6be0c9f14d.jpg" /></a>The naviDropDown plugin allows you to create a simple drop down menu, utilizing hoverIntent, and jQuery’s own slideUp and slideDown effects. You can also set the orientation of the drop down to either horizontal (default) or vertical, and set the duration and easing method of both slideUp and slideDown on initiation of the plugin.<br /> <a class="button-med" href="/misc/goto?guid=4958184553467702936">naviDropDown 1.0 Plugin</a><a class="button-med" href="/misc/goto?guid=4958184555560816014">View the Demo</a></p>    <h2><a href="/misc/goto?guid=4958184556296034153">Drill Down Menu Plugin</a></h2>    <p><a href="/misc/goto?guid=4958184556296034153"><img alt="Drill Down Menu Plugin" src="https://simg.open-open.com/show/59793022a4afbdb4ff6b22c5d949480f.jpg" /></a>This plugin will take any standard nested list and turns it into an iPod-style drill down menu. Drill down menus typically offer an excellent method for managing and organizing large and complicated menus into a small, compact and fixed-sized area. Features of this plugin include: Saved state using cookies, add count of total number of child links to each menu option and offers 2 different methods to navigate (breadcrumb style or back button to return to previous option).<br /> <a class="button-med" href="/misc/goto?guid=4958184556296034153">Drill Down Menu Plugin</a><a class="button-med" href="/misc/goto?guid=4958184558427597300">View the Demo</a></p>    <h2><a href="/misc/goto?guid=4958184559168701240">Memu – A simple CSS & jQuery Menu</a></h2>    <p><a href="/misc/goto?guid=4958184559168701240"><img alt="Memu - A simple CSS & jQuery Menu" src="https://simg.open-open.com/show/00c7bf8c7655cbd83d6143a084895d08.jpg" /></a>This small and very easy to use jQuery plugin can be used with or without jQuery (if you don’t want any JS on your page, just get the CSS).<br /> <a class="button-med" href="/misc/goto?guid=4958184559168701240">Memu – A simple CSS & jQuery Menu</a><a class="button-med" href="/misc/goto?guid=4958184561257463708">View the Demo</a></p>    <h2><a href="/misc/goto?guid=4958184562001447916">Vertical Mega Menu Plugin</a></h2>    <p><a href="/misc/goto?guid=4958184562001447916"><img alt="Vertical Mega Menu Plugin" src="https://simg.open-open.com/show/d1d0de45d625e05e63cc3a59e8a095f9.jpg" /></a>This plugin creates vertical mega-menus from standard HTML nested lists, allowing users to view all available menu options for each top-level menu item. There are several plugin options available for customizing the mega menu, you can: Choose the animation effect of the flyout menu, set the animation speed, set the number of sub-menus per row, display the flyout mega-menu on the left or right depending on the menu position and more.<br /> <a class="button-med" href="/misc/goto?guid=4958184562001447916">Vertical Mega Menu Plugin</a><a class="button-med" href="/misc/goto?guid=4958184564089934107">View the Demo</a></p>    <h2><a href="/misc/goto?guid=4958184564814596539">Simple Flickr Style Tooltip Menu</a></h2>    <p><a href="/misc/goto?guid=4958184564814596539"><img alt="Simple Flickr Style Tooltip Menu" src="https://simg.open-open.com/show/44db29501a9c53861c5d4f9a64d514dd.jpg" /></a>This tutorial will show you how to create a Flickr-style tooltip drop down menu.<br /> <a class="button-med" href="/misc/goto?guid=4958184564814596539">Simple Flickr Style Tooltip Menu</a><a class="button-med" href="/misc/goto?guid=4958184566918455832">View the Demo</a></p>    <h2><a href="/misc/goto?guid=4958184567658230312">Mega Drop Down Menu Plugin</a></h2>    <p><a href="/misc/goto?guid=4958184567658230312"><img alt="Mega Drop Down Menu Plugin" src="https://simg.open-open.com/show/b808206f97f9f6eb07bda66baf11c798.jpg" /></a>This jQuery Mega Drop Down Menu plugin takes any standard HTML nested list and turns it into a horizontal mega menu. With some basic CSS styling the mega menus can be used to create unique and visually appealing navigation for any website.<br /> <a class="button-med" href="/misc/goto?guid=4958184567658230312">Mega Drop Down Menu Plugin</a><a class="button-med" href="/misc/goto?guid=4958184569751467452">View the Demo</a></p>    <h2><a href="/misc/goto?guid=4958184570488000825">Dropdown Google Style Menu</a></h2>    <p><a href="/misc/goto?guid=4958184570488000825"><img alt="Dropdown Google Style Menu" src="https://simg.open-open.com/show/e7085c5c6af7e268f8ebc35fa66569fc.jpg" width="640" /></a>In this tutorial you will be shown how to create a Google-style dropdown menu. If you check the Google source code you will see far too many divs, uls, lis, and span elements, the idea with this tutorial is to do the same but without those extra elements.<br /> <a class="button-med" href="/misc/goto?guid=4958184570488000825">Dropdown Google Style Menu</a><a class="button-med" href="/misc/goto?guid=4958184572566635243">View the Demo</a></p>    <h2><a href="/misc/goto?guid=4958184573305117217">Cool Animated Menu</a></h2>    <p><a href="/misc/goto?guid=4958184573305117217"><img alt="Cool Animated Menu" src="https://simg.open-open.com/show/19de32000ca023d6166f22fc0c270b9d.jpg" width="640" /></a>In this tutorial you’ll be building a cool navigation list complete with a sliding hover effect. Initially learning how to build the concept in Photoshop and then laying out the basic HTML elements, styling everything with CSS and then bringing it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design.<br /> <a class="button-med" href="/misc/goto?guid=4958184573305117217">Cool Animated Menu</a><a class="button-med" href="/misc/goto?guid=4958184575394932447">View the Demo</a></p>    <h2><a href="/misc/goto?guid=4958184576122519589">Vertical Accordion Menu</a></h2>    <p><a href="/misc/goto?guid=4958184576122519589"><img alt="Vertical Accordion Menu" src="https://simg.open-open.com/show/7b9a12f4d7a09580c36c734f0a36c6fe.jpg" /></a>The plugin takes standard html nested lists and turns them into versatile vertical accordion menus.<br /> <a class="button-med" href="/misc/goto?guid=4958184576122519589">Vertical Accordion Menu</a><a class="button-med" href="/misc/goto?guid=4958184578201281945">View the Demo</a></p>    <h2><a href="/misc/goto?guid=4958184578948789778">Horizontal Dropdown Menu</a></h2>    <p><a href="/misc/goto?guid=4958184578948789778"><img alt="Horizontal Dropdown Menu" src="https://simg.open-open.com/show/6a31f4738f908bddb4cfc36960e8dfee.jpg" width="640" /></a>In this tutorial you'll be shown how to create a simple, usable and functional horizontal menu with HTML and CSS. You will also use jQuery to add some drop-down animation to the menu.<br /> <a class="button-med" href="/misc/goto?guid=4958184578948789778">Horizontal Dropdown Menu</a><a class="button-med" href="/misc/goto?guid=4958184581048293267">View the Demo</a></p>    <h2><a href="/misc/goto?guid=4958184581790348205">Dropdown Login Form</a></h2>    <p><a href="/misc/goto?guid=4958184581790348205"><img alt="Dropdown Login Form" src="https://simg.open-open.com/show/a131cfc73a11c8d9f309e8c302be279d.jpg" /></a>This is an easy to implement and lightweight simple jQuery dropdown login form.<br /> <a class="button-med" href="/misc/goto?guid=4958184581790348205">Dropdown Login Form</a><a class="button-med" href="/misc/goto?guid=4958184583885355340">View the Demo</a></p>    <h2><a href="/misc/goto?guid=4958184584640323201">Flashy Navigation with easing and hoverIntent</a></h2>    <p><a href="/misc/goto?guid=4958184584640323201"><img alt="Flashy Navigation with easing and hoverIntent" src="https://simg.open-open.com/show/235ab6aa89ace9091a1b3c1365d794ab.jpg" /></a>With this plugin you can make your navigation a little bit more flashy. It makes use of easing and hoverIntent and you can customize the rollover colors, easing method and duration.<br /> <a class="button-med" href="/misc/goto?guid=4958184584640323201">Flashy Navigation with easing and hoverIntent</a><a class="button-med" href="/misc/goto?guid=4958184586720411102">View the Demo</a></p>    <h2><a href="/misc/goto?guid=4958184587458993798">Floating Social Bar with jQuery and CSS</a></h2>    <p><a href="/misc/goto?guid=4958184587458993798"><img alt="Floating Social Bar with jQuery and CSS" src="https://simg.open-open.com/show/d6925146d026377a97cb1997e444d500.jpg" width="640" /></a>From creating the PHP file to customizing the CSS, this tutorial will guide you through the steps to build a fancy floating bar similar to the Meebo and Wibiya bars.<br /> <a class="button-med" href="/misc/goto?guid=4958184587458993798">Floating Social Bar with jQuery and CSS</a><a class="button-med" href="/misc/goto?guid=4958184589551762178">View the Demo</a><a class="button-med" href="/misc/goto?guid=4958184590291512619">View the Demo 2</a></p>    <h2><a href="/misc/goto?guid=4958184591020494163">Expanding Image Menu</a></h2>    <p><a href="/misc/goto?guid=4958184591020494163"><img alt="Expanding Image Menu" src="https://simg.open-open.com/show/9259a714078aae24fa431301eb19fb59.jpg" /></a>In this advanced and unique tutorial you will learn how to create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when clicked.<br /> <a class="button-med" href="/misc/goto?guid=4958184591020494163">Expanding Image Menu</a><a class="button-med" href="/misc/goto?guid=4958184593112794583">View the Demo</a></p>    <h2><a href="/misc/goto?guid=4958184593852408913">Animated Content Menu</a></h2>    <p><a href="/misc/goto?guid=4958184593852408913"><img alt="Animated Content Menu" src="https://simg.open-open.com/show/d1c3401f9c85ead23307df39caa99370.jpg" /></a>With this tutorial you will create a slick animated content menu with jQuery. The menu items will be animated and when clicked, a content area with further information will appear and the background image will also change according to which menu item was clicked.<br /> <a class="button-med" href="/misc/goto?guid=4958184593852408913">Animated Content Menu</a><a class="button-med" href="/misc/goto?guid=4958184595938742215">View the Demo</a></p>    <h2><a href="/misc/goto?guid=4958184596682688557">Overlay-like Effect</a></h2>    <p><a href="/misc/goto?guid=4958184596682688557"><img alt="Overlay-like Effect" src="https://simg.open-open.com/show/46965a75f1e2d0c29178e70122aaadce.jpg" /></a>You will create a slick overlay effect with jQuery that does not use an overlay with this tut. The idea is to change the opacity or the color of certain elements in order to make it look like as if you are covering the content with an overlay.<br /> <a class="button-med" href="/misc/goto?guid=4958184596682688557">Overlay-like Effect</a><a class="button-med" href="/misc/goto?guid=4958184598762068073">View the Demo</a></p>    <h2><a href="/misc/goto?guid=4958184599499017858">Jquery.ascensor.js</a></h2>    <p><a href="/misc/goto?guid=4958184599499017858"><img alt="Jquery.ascensor.js" src="https://simg.open-open.com/show/7a80801c9e3c7e5aecf7f9a35b42f1d1.jpg" /></a><br /> <a class="button-med" href="/misc/goto?guid=4958184599499017858">Jquery.ascensor.js</a><a class="button-med" href="/misc/goto?guid=4958184601597606811">View the Demo</a></p>