37个超级棒的 jQuery菜单插件

     <p>        导航是网站设计最重要的元素之一。一个优秀的导航菜单要简洁易用，方便用户。而用 jQuery 菜单插件制作出来的动态导航则能很好的满足这一点。jQuery 是一个轻量级的 JavaScript 框架，兼容 CSS3 以及各种浏览器，同时还有许多成熟的插件可供选择，能给用户带来更好的使用体验。本文整理了 37 个优秀的 jQuery 菜单插件，用以帮助你创建更好的导航菜单。</p>    <p>        <strong>1、<a href="/misc/goto?guid=4958187606098787831" target="_blank">用 jQuery 和 CSS 创建的 Mac 风格的菜单</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/1516c50d8c4479c5afc7c90b622c5aa0.jpg" alt="37个超级棒的 jQuery菜单插件" height="112" width="502" /></p>    <p>        如果你是一名标准的 Mac 迷，你一定会喜欢这个菜单。它有两处停靠的位置：顶部和底部。</p>    <p>        <strong>2、<a href="/misc/goto?guid=4958334160953600554" target="_blank">超级菜单包</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/146eeaf9b9b04d9000cb09924c7c697e.jpg" alt="37个超级棒的 jQuery菜单插件" height="243" width="497" /></p>    <p>        超级菜单包里包含了 10 个效果很酷的菜单，其中有 5 个是全部用 CSS 写出来的。对于那些想要拥有一次特殊设计体验，或者寻求全新起点的设计师来说，它堪称完美。</p>    <p>        <strong>3、<a href="/misc/goto?guid=4958334161757637387" target="_blank">LavaLamp</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/7872a79227828e968ea14106e50d699c.jpg" alt="37个超级棒的 jQuery菜单插件" height="232" width="502" /></p>    <p>        LavaLamp 是一个简单易用的 jQuery 插件，可以让你创造出效果惊人的水平导航条。让人高兴的是，这很容易实现。</p>    <p>        <strong>4、<a href="/misc/goto?guid=4958334162557387220" target="_blank">Quick & Pro 菜单</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/14e171150f3e23668bad345acf3dc9a4.jpg" alt="37个超级棒的 jQuery菜单插件" height="144" width="502" /></p>    <p>        Quick & Pro 菜单插件可以创建带有特殊风格的 jQuery 大型菜单，这在网站设计中很少见，不过，却很容易让用户快速得知网站的大量信息。</p>    <p>        <strong>5、<a href="/misc/goto?guid=4958334163357112588" target="_blank">Superfish jQuery 菜单插件</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/b7a6fe68d3305c7e1575eea362b794b3.jpg" alt="37个超级棒的 jQuery菜单插件" height="258" width="502" /></p>    <p>        Superfish 是一个专门用于菜单上的 jQuery 插件。</p>    <p>        <strong>6、<a href="/misc/goto?guid=4958334164150148690" target="_blank">菜单制作者</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/8b72f62f238e02228773e79c3c159469.jpg" alt="37个超级棒的 jQuery菜单插件" height="321" width="502" /></p>    <p>        这是一段 JavaScript 代码，为你提供一个具有友好界面的工具，此工具用圆角和流畅的动画帮助你创建导航菜单。制作导航菜单从未像这样简单。你所要做的仅仅是拖动滚动条来调整菜单的属性。</p>    <p>        <strong>7、<a href="/misc/goto?guid=4958334164941965345" target="_blank">快速访问菜单</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/d00d385c0b018d3f7b0eb669a792b0ee.jpg" alt="37个超级棒的 jQuery菜单插件" height="308" width="503" /></p>    <p>        轻松定制，易于集成，并可以快速访问你的网站。是适用于网站设计的最小的设计方案。</p>    <p>        <strong>8、<a href="/misc/goto?guid=4958334165730062836" target="_blank">Sticklr——用 CSS3 和 jQuery 实现的固定侧边栏</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/03767b098f7294871a41a31399fb0d78.jpg" alt="37个超级棒的 jQuery菜单插件" height="295" width="503" /></p>    <p>        灵感来自 <a href="/misc/goto?guid=4958328854543912505" target="_blank">Envato 站点</a>的切换工具，这里有一个很有用的固定侧边栏，用 CSS 实现后并经由 jQuery 增强了这一效果。</p>    <p>        <strong>9、<a href="/misc/goto?guid=4958334167280573099" target="_blank">Puffer Fish 式的导航</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/4aa475ab13bdfb790d71af424c62df66.jpg" alt="37个超级棒的 jQuery菜单插件" height="258" width="502" /></p>    <p>        带有悬停发光效果的导航插件。</p>    <p>        <strong>10、<a href="/misc/goto?guid=4958334168069323454" target="_blank">滑动标签——jQuery 插件</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/81592810997fff7cb86112a0bc3c5c2a.jpg" alt="37个超级棒的 jQuery菜单插件" height="241" width="503" /></p>    <p>        滑动标签是一款为你的网站创建水平或垂直动画标签的 jQuery 插件。你可以在一个页面上实现多个标签实例，而且可以用 CSS 实现任何你定制的标签。这款插件有很多定制的选项，使得它灵活易用，易于满足你的定制需求。</p>    <p>        <strong>11、<a href="/misc/goto?guid=4958186759881404453" target="_blank">垂直滑动的 jQuery 菜单</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/c0ae32c2b79f8f349868e71f0327bf1f.jpg" alt="37个超级棒的 jQuery菜单插件" height="199" width="502" /></p>    <p>        毫无疑问，你的客户一定会喜欢它。更妙的是，本教程也将教你如何用 Photoshop 来设计此类菜单。</p>    <p>        <strong>12、<a href="/misc/goto?guid=4958334169601178744" target="_blank">Sherpa 完整的导航系统</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/54812734be3b8285fa46cd18bb24ecd6.jpg" alt="37个超级棒的 jQuery菜单插件" height="373" width="503" /></p>    <p>        Sherpa 汇聚了每个页面都必不可少的三个主要导航元素：导航栏、侧边栏和固定页脚。</p>    <p>        <strong>13、<a href="/misc/goto?guid=4958334169601178744" target="_blank">向下滑动菜单</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/a78aaa9b72c2a84b191244cd1ca2f055.jpg" alt="37个超级棒的 jQuery菜单插件" height="258" width="502" /></p>    <p>        这个创意是当缩略图弹出时，菜单选项像盒子一样滑出。对于一些菜单选项，我们还容纳一个子菜单来添加一些链接。子菜单是从左边还是从右边滑出，这取决于鼠标放在哪一个菜单选项上。</p>    <p>        <strong>14、<a href="/misc/goto?guid=4958184559168701240" target="_blank">Memu——一个简单的的 CSS / JavaScript / jQuery 的菜单</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/5a26ada538b195974c183e8f0d3b2495.jpg" alt="37个超级棒的 jQuery菜单插件" height="258" width="502" /></p>    <p>        一个小而实用的 jQuery 插件。</p>    <p>        <strong>15、<a href="/misc/goto?guid=4958334171845875139" target="_blank">下拉式菜单</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/1bc3771772c378137710361cb9f4c16a.jpg" alt="37个超级棒的 jQuery菜单插件" height="252" width="510" /></p>    <p>        有了这个脚本，你可以制作美观且互动性良好的下拉菜单。这个脚本的好处是，你不仅可以制作下拉列表菜单，也可以使用一个 div 标签作为下拉元素。</p>    <p>        <strong>16、<a href="/misc/goto?guid=4958334172642471697" target="_blank">用 JavaScript 写出超大水平菜单</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/987e681601b7a6e7021d582bc9e11fb5.jpg" alt="37个超级棒的 jQuery菜单插件" height="351" width="502" /></p>    <p>        <strong>17、<a href="/misc/goto?guid=4958320021914706145" target="_blank">Ninja UI</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/0b1db8028e880c7af0cdb9dba21504b6.jpg" alt="37个超级棒的 jQuery菜单插件" height="258" width="502" /></p>    <p>        <strong>18、<a href="/misc/goto?guid=4958334174182536157" target="_blank">超大的菜单设置</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/38e27c4205ef8f1b10e0b04e0bb9a7f8.jpg" alt="37个超级棒的 jQuery菜单插件" height="241" width="501" /></p>    <p>        通过 10 多个 jQuery 效果和 13 种颜色中的一种来创建这种独特的菜单，而这一效果可以由巨型下拉菜单设置完美的实现。 </p>    <p>        <strong>19、<a href="/misc/goto?guid=4958334174970601534" target="_blank">图片悬停移动</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/0db340fc7618add1f205f8697f3bfd5c.jpg" alt="37个超级棒的 jQuery菜单插件" height="258" width="502" /></p>    <p>        一个简单实用的导航插件。</p>    <p>        <strong>20、<a href="/misc/goto?guid=4958334175763508356" target="_blank">jQuery One Page 导航插件</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/191de90273c7b324c02648bc5185ec2c.jpg" alt="37个超级棒的 jQuery菜单插件" height="258" width="502" /></p>    <p>        有了这个插件，当导航被点击时页面翻转的更平滑。它还可以根据翻转的内容自动突出正确的导航区域。</p>    <p>        <strong>21、<a href="/misc/goto?guid=4958334176565181026" target="_blank">固定页脚</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/d502223eac023b90b113297d5db7de95.jpg" alt="37个超级棒的 jQuery菜单插件" height="346" width="503" /></p>    <p>        这里使用 jQuery 只为增强网页特效的效果。</p>    <p>        <strong>22、<a href="/misc/goto?guid=4958334177359272564" target="_blank">Asura jQuery Footer</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/12f214245d3a7e23c94a54fafdce1db4.jpg" alt="37个超级棒的 jQuery菜单插件" height="246" width="502" /></p>    <p>        Asura jQuery 式的页脚是一个高度可定制的固定页脚。它可以让你更自由地在网页底部放置内容。</p>    <p>        <strong>23、<a href="/misc/goto?guid=4958334178162675682" target="_blank">Dropp</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/18e6dbf5d9b67bd93e7596fc55efa89a.jpg" alt="37个超级棒的 jQuery菜单插件" height="258" width="502" /></p>    <p>        Dropp 是一个可以用来取代常规下拉菜单的 jQuery 插件。</p>    <p>        <strong>24、<a href="/misc/goto?guid=4958334178962038991" target="_blank">jMenu</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/71c1ac9a9e959ab523f152389678ef20.jpg" alt="37个超级棒的 jQuery菜单插件" height="238" width="502" /></p>    <p>        jMenu 是一个我们可以用来创建带有无限制子菜单水平导航的 jQuery 插件。菜单中的标记显得很干净，因为它使用嵌套列表。</p>    <p>        <strong>25、<a href="/misc/goto?guid=4958334179763039150" target="_blank">skinableTabs</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/5c7ef7956086746c3ec1311899cb2b5c.jpg" alt="37个超级棒的 jQuery菜单插件" height="259" width="502" /></p>    <p>        skinableTabs 是一个不显眼的 jQuery 插件，它允许你用美观的标签来凸显网站的内容。</p>    <p>        <strong>26、<a href="/misc/goto?guid=4958327555918124194" target="_blank">地铁地图可视化的 jQuery 插件</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/1cda111e90c00e3ce55a206c26e70ce5.jpg" alt="37个超级棒的 jQuery菜单插件" height="258" width="502" /></p>    <p>        这个插件把无序的列表嵌入到一张类似于伦敦地下地图风格的地铁地图里。</p>    <p>        <strong>27、<a href="/misc/goto?guid=4958334181284327773" target="_blank">MobilyBlocks</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/468fecc453fb3e6411937fba9dbb5036.jpg" alt="37个超级棒的 jQuery菜单插件" height="258" width="502" /></p>    <p>        MobilyBlocks 插件允许你将无序列表创建成一个类似于圆圈的样式。</p>    <p>        <strong>28、<a href="/misc/goto?guid=4958202351242810153" target="_blank">mb.verticalSlider</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/ad2cf7dc31655b38595ecee885b4ec72.jpg" alt="37个超级棒的 jQuery菜单插件" height="307" width="184" /></p>    <p>        <strong>29、<a href="/misc/goto?guid=4958199724927734020" target="_blank">infiniScroll</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/37da10344069cd1bdec510a077a0e6c1.jpg" alt="37个超级棒的 jQuery菜单插件" height="352" width="502" /></p>    <p>        <strong>30、<a href="/misc/goto?guid=4958334183574718697" target="_blank">jQCloud</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/90724cb7d39473ca6d4c28280d04c4df.jpg" alt="37个超级棒的 jQuery菜单插件" height="258" width="502" /></p>    <p>        jQCloud 允许你创建整齐的云形字和云形的标签。由于这个插件产生纯 HTML 代码，这种云形字的布局可以很容易地通过传统的 CSS 样式自定义方式来实现。</p>    <p>        <strong>31、<a href="/misc/goto?guid=4958334184370481042" target="_blank">jQuery Stepy——一个魔幻般的插件</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/16c5248afc3972daec9651f46d23ab91.jpg" alt="37个超级棒的 jQuery菜单插件" height="258" width="502" /></p>    <p>        <strong>32、<a href="/misc/goto?guid=4958334185177220701" target="_blank">使用 jQuery 的手风琴式菜单</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/abf1c9ca8dfabaa6adeeed6c54adac78.jpg" alt="37个超级棒的 jQuery菜单插件" height="258" width="502" /></p>    <p>        <strong>33、<a href="/misc/goto?guid=4958334185973040729" target="_blank">jQuery 菜单选择器</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/e1035153cbf963e6373bc93178b1e116.jpg" alt="37个超级棒的 jQuery菜单插件" height="258" width="502" /></p>    <p>        这个插件通过本地路径来激活菜单选项。</p>    <p>        <strong>34、<a href="/misc/goto?guid=4958334186771222044" target="_blank">FooBar——一个 jQuery 式的通知栏</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/07556c2141fa3b3aa63f83dfb763028a.jpg" alt="37个超级棒的 jQuery菜单插件" height="281" width="502" /></p>    <p>        Foobar 的是一个位于页面顶部的通知栏，它简洁且不显眼，当用户访问时，用以告知或公布网站信息。</p>    <p>        <strong>35、<a href="/misc/goto?guid=4958334187570808104" target="_blank">无尽的自动浏览</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/cdb7304125c88d7be9cd3fa45d78b7fb.jpg" alt="37个超级棒的 jQuery菜单插件" height="249" width="502" /></p>    <p>        当运行在一个 DOM 元素上的时候，倘若用户浏览到此元素的底部，这个插件将扩展此元素并自动填充内容。内容是通过 Ajax 来获取的，插件使用本地存储来保持高速缓存。</p>    <p>        <strong>36、<a href="/misc/goto?guid=4958334188374739416" target="_blank">jQuery Context Menu</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/ab8302ecdd2826298902604bf378c850.jpg" alt="37个超级棒的 jQuery菜单插件" height="258" width="502" /></p>    <p>        ContextMenu 是一个轻量级的 jQuery 插件，可以让你选择性地覆盖浏览器的右键菜单。</p>    <p>        <strong>37、<a href="/misc/goto?guid=4958334189160078998" target="_blank">jCrumb</a></strong></p>    <p style="text-align:center;"><img src="https://simg.open-open.com/show/859ecebcbb7708342c411a977f48d78f.jpg" alt="37个超级棒的 jQuery菜单插件" height="258" width="502" /></p>    <p>        jCrumb 是一个 jQuery 插件，可以让你添加一些琐碎的消息到任何一个 Web 页里，而不必担心站点地图的问题。</p>    <p>        英文原文：<a href="/misc/goto?guid=4958334189960718338" target="_blank">35+ Useful jQuery Menu Plugins</a>.</p>    <div id="come_from">     来自:     <a href="/misc/goto?guid=4958334190755036251" id="link_source2" target="_blank">www.iteye.com</a>    </div>    <span id="shareA4" class="fl"> </span>