导航是网站设计最重要的元素之一。一个优秀的导航菜单要简洁易用,方便用户。而用jQuery菜单插件制作出来的动态导航则能很好的满足这一点。jQuery是一个轻量级的JavaScript框架,兼容CSS3以及各种浏览器,同时还有许多成熟的插件可供选择,能给用户带来更好的使用体验。本文整理了37个优秀的jQuery菜单插件,用以帮助你创建更好的导航菜单。
1、用jQuery和CSS创建的Mac风格的菜单
如果你是一名标准的Mac迷,你一定会喜欢这个菜单。它有两处停靠的位置:顶部和底部。
2、超级菜单包
超级菜单包里包含了10个效果很酷的菜单,其中有5个是全部用CSS写出来的。对于那些想要拥有一次特殊设计体验,或者寻求全新起点的设计师来说,它堪称完美。
3、LavaLamp
LavaLamp是一个简单易用的jQuery插件,可以让你创造出效果惊人的水平导航条。让人高兴的是,这很容易实现。
4、Quick & Pro菜单
Quick & Pro菜单插件可以创建带有特殊风格的jQuery大型菜单,这在网站设计中很少见,不过,却很容易让用户快速得知网站的大量信息。
5、Superfish jQuery菜单插件
Superfish 是一个专门用于菜单上的jQuery插件。
6、菜单制作者
这是一段JavaScript代码,为你提供一个具有友好界面的工具,此工具用圆角和流畅的动画帮助你创建导航菜单。制作导航菜单从未像这样简单。你所要做的仅仅是拖动滚动条来调整菜单的属性。
7、快速访问菜单
轻松定制,易于集成,并可以快速访问你的网站。是适用于网站设计的最小的设计方案。
8、Sticklr——用CSS3和jQuery实现的固定侧边栏
灵感来自 Envato站点的切换工具,这里有一个很有用的固定侧边栏,用CSS实现后并经由jQuery增强了这一效果。
9、Puffer Fish式的导航
带有悬停发光效果的导航插件。
10、滑动标签——jQuery插件
滑动标签是一款为你的网站创建水平或垂直动画标签的jQuery插件。你可以在一个页面上实现多个标签实例,而且可以用CSS实现任何你定制的标签。这款插件有很多定制的选项,使得它灵活易用,易于满足你的定制需求。
11、垂直滑动的jQuery菜单
毫无疑问,你的客户一定会喜欢它。更妙的是,本教程也将教你如何用Photoshop来设计此类菜单。
12、Sherpa | 完整的导航系统
Sherpa汇聚了每个页面都必不可少的三个主要导航元素:导航栏、侧边栏和固定页脚。
13、向下滑动菜单
这个创意是当缩略图弹出时,菜单选项像盒子一样滑出。对于一些菜单选项,我们还容纳一个子菜单来添加一些链接。子菜单是从左边还是从右边滑出,这取决于鼠标放在哪一个菜单选项上。
14、Memu——一个简单的的CSS / JavaScript / jQuery的菜单
一个小而实用的jQuery插件。
15、下拉式菜单
有了这个脚本,你可以制作美观且互动性良好的下拉菜单。这个脚本的好处是,你不仅可以制作下拉列表菜单,也可以使用一个div标签作为下拉元素。
16、用JavaScript写出超大水平菜单
17、Ninja UI
18、超大的菜单设置
通过10多个jQuery效果和13种颜色中的一种来创建这种独特的菜单,而这一效果可以由巨型下拉菜单设置完美的实现。
19、图片悬停移动
一个简单实用的导航插件。
20、jQuery One Page 导航插件
有了这个插件,当导航被点击时页面翻转的更平滑。它还可以根据翻转的内容自动突出正确的导航区域。
21、固定页脚
这里使用jQuery只为增强网页特效的效果。
22、Asura jQuery Footer
Asura jQuery式的页脚是一个高度可定制的固定页脚。它可以让你更自由地在网页底部放置内容。
23、Dropp
Dropp是一个可以用来取代常规下拉菜单的jQuery插件。
24、jMenu
jMenu是一个我们可以用来创建带有无限制子菜单水平导航的jQuery插件。菜单中的标记显得很干净,因为它使用嵌套列表。
25、skinableTabs
skinableTabs是一个不显眼的jQuery插件,它允许你用美观的标签来凸显网站的内容。
26、地铁地图可视化的jQuery插件
这个插件把无序的列表嵌入到一张类似于伦敦地下地图风格的地铁地图里。
27、MobilyBlocks
MobilyBlocks插件允许你将无序列表创建成一个类似于圆圈的样式。
28、mb.verticalSlider
29、infiniScroll
30、jQCloud
jQCloud允许你创建整齐的云形字和云形的标签。由于这个插件产生纯HTML代码,这种云形字的布局可以很容易地通过传统的CSS样式自定义方式来实现。
31、jQuery Stepy——一个魔幻般的插件
32、使用jQuery的手风琴式菜单
33、jQuery菜单选择器
这个插件通过本地路径来激活菜单选项。
34、FooBar——一个jQuery式的通知栏
Foobar的是一个位于页面顶部的通知栏,它简洁且不显眼,当用户访问时,用以告知或公布网站信息。
35、无尽的自动浏览
当运行在一个DOM元素上的时候,倘若用户浏览到此元素的底部,这个插件将扩展此元素并自动填充内容。内容是通过Ajax来获取的,插件使用本地存储来保持高速缓存。
36、jQuery Context Menu
ContextMenu是一个轻量级的jQuery插件,可以让你选择性地覆盖浏览器的右键菜单。
37、jCrumb
jCrumb是一个jQuery 插件,可以让你添加一些琐碎的消息到任何一个Web页里,而不必担心站点地图的问题。
1、用jQuery和CSS创建的Mac风格的菜单
![](http://dl.iteye.com/upload/attachment/0065/2309/fe5975ac-338b-386b-8ef8-ab783d9ae8a7.jpg)
如果你是一名标准的Mac迷,你一定会喜欢这个菜单。它有两处停靠的位置:顶部和底部。
2、超级菜单包
![](http://dl.iteye.com/upload/attachment/0065/2312/1031179c-a66d-397e-b40d-dae56a25f3e3.jpg)
超级菜单包里包含了10个效果很酷的菜单,其中有5个是全部用CSS写出来的。对于那些想要拥有一次特殊设计体验,或者寻求全新起点的设计师来说,它堪称完美。
3、LavaLamp
![](http://dl.iteye.com/upload/attachment/0065/2317/9ab4464e-677e-3f9a-935a-672fb0fd97c6.jpg)
LavaLamp是一个简单易用的jQuery插件,可以让你创造出效果惊人的水平导航条。让人高兴的是,这很容易实现。
4、Quick & Pro菜单
![](http://dl.iteye.com/upload/attachment/0065/2319/5083819a-a7a4-30b3-b0dd-4373a85b2236.jpg)
Quick & Pro菜单插件可以创建带有特殊风格的jQuery大型菜单,这在网站设计中很少见,不过,却很容易让用户快速得知网站的大量信息。
5、Superfish jQuery菜单插件
![](http://dl.iteye.com/upload/attachment/0065/2321/4a8b8587-87e5-3d23-9de0-899becd3263c.jpg)
Superfish 是一个专门用于菜单上的jQuery插件。
6、菜单制作者
![](http://dl.iteye.com/upload/attachment/0065/2325/5f453560-ef86-328a-87c4-24a5eb1dfa7e.jpg)
这是一段JavaScript代码,为你提供一个具有友好界面的工具,此工具用圆角和流畅的动画帮助你创建导航菜单。制作导航菜单从未像这样简单。你所要做的仅仅是拖动滚动条来调整菜单的属性。
7、快速访问菜单
![](http://dl.iteye.com/upload/attachment/0065/2328/dec451b3-7644-3ae0-8718-288a9b4fd06f.jpg)
轻松定制,易于集成,并可以快速访问你的网站。是适用于网站设计的最小的设计方案。
8、Sticklr——用CSS3和jQuery实现的固定侧边栏
![](http://dl.iteye.com/upload/attachment/0065/2337/9790af2a-0deb-3c71-8db6-79eff88b941b.jpg)
灵感来自 Envato站点的切换工具,这里有一个很有用的固定侧边栏,用CSS实现后并经由jQuery增强了这一效果。
9、Puffer Fish式的导航
![](http://dl.iteye.com/upload/attachment/0065/2340/a04d6205-76a1-32e0-85ec-0062c61944d3.jpg)
带有悬停发光效果的导航插件。
10、滑动标签——jQuery插件
![](http://dl.iteye.com/upload/attachment/0065/2343/6b209557-435d-3ebd-bc2e-90450a7229d7.jpg)
滑动标签是一款为你的网站创建水平或垂直动画标签的jQuery插件。你可以在一个页面上实现多个标签实例,而且可以用CSS实现任何你定制的标签。这款插件有很多定制的选项,使得它灵活易用,易于满足你的定制需求。
11、垂直滑动的jQuery菜单
![](http://dl.iteye.com/upload/attachment/0065/2346/6ee8e1a8-23e9-3d82-a717-1c4a50055dad.jpg)
毫无疑问,你的客户一定会喜欢它。更妙的是,本教程也将教你如何用Photoshop来设计此类菜单。
12、Sherpa | 完整的导航系统
![](http://dl.iteye.com/upload/attachment/0065/2349/155c35f1-193b-36ca-aedd-98555d6d097a.jpg)
Sherpa汇聚了每个页面都必不可少的三个主要导航元素:导航栏、侧边栏和固定页脚。
13、向下滑动菜单
![](http://dl.iteye.com/upload/attachment/0065/2352/85c7a3ec-8a9e-36f9-8f3e-795108f2bf9b.jpg)
这个创意是当缩略图弹出时,菜单选项像盒子一样滑出。对于一些菜单选项,我们还容纳一个子菜单来添加一些链接。子菜单是从左边还是从右边滑出,这取决于鼠标放在哪一个菜单选项上。
14、Memu——一个简单的的CSS / JavaScript / jQuery的菜单
![](http://dl.iteye.com/upload/attachment/0065/2463/aa44c2e8-8ceb-3666-bee0-bc7f6ac0d901.jpg)
一个小而实用的jQuery插件。
15、下拉式菜单
![](http://dl.iteye.com/upload/attachment/0065/2354/cf834425-b4ed-3c42-802b-885228a83d92.jpg)
有了这个脚本,你可以制作美观且互动性良好的下拉菜单。这个脚本的好处是,你不仅可以制作下拉列表菜单,也可以使用一个div标签作为下拉元素。
16、用JavaScript写出超大水平菜单
![](http://dl.iteye.com/upload/attachment/0065/2357/3655e909-d7d1-303f-8b0d-ab663552be63.jpg)
17、Ninja UI
![](http://dl.iteye.com/upload/attachment/0065/2359/47524028-7ef9-3862-a7cb-ab75abb203a0.jpg)
18、超大的菜单设置
![](http://dl.iteye.com/upload/attachment/0065/2362/84aed256-f048-3de4-a60c-355c15d150b5.jpg)
通过10多个jQuery效果和13种颜色中的一种来创建这种独特的菜单,而这一效果可以由巨型下拉菜单设置完美的实现。
19、图片悬停移动
![](http://dl.iteye.com/upload/attachment/0065/2364/0ada5941-56dd-3924-8c7d-372ad75bbae3.jpg)
一个简单实用的导航插件。
20、jQuery One Page 导航插件
![](http://dl.iteye.com/upload/attachment/0065/2380/c3674f14-2d88-30e0-bd7c-155b0fb0e953.jpg)
有了这个插件,当导航被点击时页面翻转的更平滑。它还可以根据翻转的内容自动突出正确的导航区域。
21、固定页脚
![](http://dl.iteye.com/upload/attachment/0065/2382/8e7a2ff2-32b3-33ad-abb7-007b37ca75f9.jpg)
这里使用jQuery只为增强网页特效的效果。
22、Asura jQuery Footer
![](http://dl.iteye.com/upload/attachment/0065/2384/ced1479e-0352-39a8-9714-a0f5b2a2f012.jpg)
Asura jQuery式的页脚是一个高度可定制的固定页脚。它可以让你更自由地在网页底部放置内容。
23、Dropp
![](http://dl.iteye.com/upload/attachment/0065/2386/6539932a-0a96-309b-adc9-cdd7a5121c5c.jpg)
Dropp是一个可以用来取代常规下拉菜单的jQuery插件。
24、jMenu
![](http://dl.iteye.com/upload/attachment/0065/2388/f81f534b-5160-36dc-9878-d0dc4b636c67.jpg)
jMenu是一个我们可以用来创建带有无限制子菜单水平导航的jQuery插件。菜单中的标记显得很干净,因为它使用嵌套列表。
25、skinableTabs
![](http://dl.iteye.com/upload/attachment/0065/2391/fb7ea7dc-e392-3204-ad14-fb6164408e4d.jpg)
skinableTabs是一个不显眼的jQuery插件,它允许你用美观的标签来凸显网站的内容。
26、地铁地图可视化的jQuery插件
![](http://dl.iteye.com/upload/attachment/0065/2393/2eeb4615-1067-34c3-a50e-738a2e1d3c5a.jpg)
这个插件把无序的列表嵌入到一张类似于伦敦地下地图风格的地铁地图里。
27、MobilyBlocks
![](http://dl.iteye.com/upload/attachment/0065/2417/527d6b9c-178c-31fc-b3ca-0a22019c48f5.jpg)
MobilyBlocks插件允许你将无序列表创建成一个类似于圆圈的样式。
28、mb.verticalSlider
![](http://dl.iteye.com/upload/attachment/0065/2419/ae362e5a-b7fc-38ae-9d95-14b36c18656d.jpg)
29、infiniScroll
![](http://dl.iteye.com/upload/attachment/0065/2421/62f1104c-0423-352e-ad0e-4d4a4e14beb0.jpg)
30、jQCloud
![](http://dl.iteye.com/upload/attachment/0065/2424/fc39ff21-041b-31fc-bc93-4cec6bcf736a.jpg)
jQCloud允许你创建整齐的云形字和云形的标签。由于这个插件产生纯HTML代码,这种云形字的布局可以很容易地通过传统的CSS样式自定义方式来实现。
31、jQuery Stepy——一个魔幻般的插件
![](http://dl.iteye.com/upload/attachment/0065/2426/2ba099b1-c86f-368c-8590-a43013143378.jpg)
32、使用jQuery的手风琴式菜单
![](http://dl.iteye.com/upload/attachment/0065/2428/1d7ff424-7dda-3688-b23c-81ae9aa9fa0a.jpg)
33、jQuery菜单选择器
![](http://dl.iteye.com/upload/attachment/0065/2439/bd2b1525-9307-3bb7-96f1-bcd67e71db71.jpg)
这个插件通过本地路径来激活菜单选项。
34、FooBar——一个jQuery式的通知栏
![](http://dl.iteye.com/upload/attachment/0065/2441/870598c8-f310-3356-b0e0-91cd9d9160b7.jpg)
Foobar的是一个位于页面顶部的通知栏,它简洁且不显眼,当用户访问时,用以告知或公布网站信息。
35、无尽的自动浏览
![](http://dl.iteye.com/upload/attachment/0065/2443/46fd9f62-492d-39ec-9fb7-624b3981b822.jpg)
当运行在一个DOM元素上的时候,倘若用户浏览到此元素的底部,这个插件将扩展此元素并自动填充内容。内容是通过Ajax来获取的,插件使用本地存储来保持高速缓存。
36、jQuery Context Menu
![](http://dl.iteye.com/upload/attachment/0065/2445/dabf0441-c17f-3d74-bde4-41843cd5fe5a.jpg)
ContextMenu是一个轻量级的jQuery插件,可以让你选择性地覆盖浏览器的右键菜单。
37、jCrumb
![](http://dl.iteye.com/upload/attachment/0065/2447/87d378a2-9758-30f9-8e6b-354c4628a962.jpg)
jCrumb是一个jQuery 插件,可以让你添加一些琐碎的消息到任何一个Web页里,而不必担心站点地图的问题。