分享20个漂亮强大的jQuery导航菜单

2010年12月30日00:24  来源:IT168 作者:廖煜嵘 译
 字号:

  【IT168 技术】在网页中,菜单导航要的功能是十分重要的,它能告诉你要寻找信息的准确位置。在jQuery中,有众多的优秀的脚本可以帮助你去实现某一方面的功能,但在导航菜单方面,数量虽然也不少,但优秀的导航菜单却不是很多。本文将选取了20个漂亮强大的使用jQuery菜单的插件或教程,并给出了下载或学习的地址,其中必定有你所喜欢的。

  1 漂亮的滑动弹出效果

  这是一款漂亮的向右滑动弹出的效果,其运行效果地址在:http://tympanus.net/Tutorials/FixedNavigationTutorial/,如下图所示:

  

  其中的操作方法为当鼠标点隐藏的菜单时,其菜单会自动向右弹出,当鼠标移动到另外一个菜单项时,原来的菜单项会自动消失,效果非常好。而这个菜单的教程为:http://tympanus.net/codrops/2009/11/30/beautiful-slide-out-navigation-a-css-and-jquery-tutorial/?1292927202

  2 带搜索框和下拉框的导航菜单

  

  这个导航菜单的效果在http://tympanus.net/Tutorials/UIElements/SearchBox/可以看到,当用户在输入框中鼠标点击时,会弹出下拉框,其中有很多个复选框,用户可以选择这些复选框进行选择,然后再提交到后台进行处理。这个菜单的代码下载在http://tympanus.net/codrops/2010/07/14/ui-elements-search-box/可以下载到。

  3 jQuery MegaMenu2

  

  jQuery MegaMenu2(http://www.geektantra.com/2010/05/jquery-megamenu-2/)是一个功能十分强大的下拉导航菜单,这个菜单的特点是,每个下拉菜单的样式都可以定制,如上图所示。

  4 Cut And Paste jQuery 菜单

  

  这个菜单的特点是,只要你设置好了一个锚点(比如在按钮或者链接上),就可以设置多列的导航菜单,如上图。在上面的图中点某个按钮,就会弹出如下的导航菜单。这个菜单的代码可以在http://www.javascriptkit.com/script/script2/jkmegamenu.shtml中下载。

  5 大型的下拉导航菜单

  

  这个叫Mega Drop Down Menus的jQuery下拉导航菜单的效果,特别适用于比较大型的电子商务站中的多级菜单导航,可以在http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/中 学习到如何编写。

  6 简洁冷色调的一款jQuery导航菜单

  

  研究表明,用户进入网页的第一眼,往往就会被导航菜单所注意到。现在很多导航菜单都搞的很花俏,如果你不喜欢花俏的话,可以尝试根据下面这个教程去学习,去学习做一个如上图的导航菜单,其风格是简单而显得冷色调。教程在http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html可以看到。

  7 Superfish导航菜单

  

  Superfish导航菜单(http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started)的特点在于简单,而且提供了多种样式可供选择,支持IE6及各类主流浏览器。

  8 jQuery配合动画效果的导航菜单

  

  在这个教程中(http://www.shopdev.co.uk/blog/animated-menus-using-jquery/),将会学习到如何使用css,javascript和xhtml去简单打造一个有动画效果的导航菜单。

  9 使用CSS和jQuery设计的一个特别的导航菜单

  

  这个导航菜单的效果很特别,当点每个按钮时,按钮时从上向下滑动出现的。效果在这http://d2o0t5hpnwv4c1.cloudfront.net/009_jQueryMenu/sm/result/index.html,其中特别推荐这个教程在http://net.tutsplus.com/tutorials/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/

  10 非常小巧的jQuery导航菜单

  

  这个菜单的效果及教程在http://javascript-array.com/scripts/jquery_simple_drop_down_menu/中可以看到,它的文件体积很小,而且代码不多,代码就20多行,使用十分方便,而且兼容IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+等各类浏览器。

  11 简单的jQuery下拉导航

  

  这个导航菜单的效果如上图,运行效果和教程在http://css-tricks.com/simple-jquery-dropdowns/,其中的特点在于作者认为要利用它只需要修改最小的样式,而且体积小,能兼容各类浏览器。

  12 多方向的下拉导航菜单

  

  这个菜单的效果在http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm#ajax可以看到,其特点之一是使用了CSS3和能支持ajax,而且菜单效果可以设置横向导航时菜单下拉,以及竖向导航时,菜单向右弹出。

  13 jQuery Multi Level CSS Menu

  

  之所以要推荐这个菜单,不是因为它的效果有多眩目,而是因为它的过于简洁,就1个CSS文件和一个js文件和jquery文件而已,很适合初学者学习。说明在:http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_horizontal_blue/

  14 一个优秀的多层导航菜单

  

  地址在:http://woork.blogspot.com/2009/09/how-to-implement-perfect-multi-level.html,但有个遗憾地方,不能派在IE8上

  15 无限制级数的垂直下拉导航菜单

  

  地址在:http://www.htmldrive.net/items/show/57/Simple-unlimited-levels-vertical-drop-down-navigation-menu-jquery-plugin.html

  16 jdMenu

  

  jdMenu(http://jdsharp.us/jQuery/plugins/jdMenu/)提供了一个小巧,简洁的横向下拉导航菜单,还支持ajax和键盘呢。

  17 跳跃式效果的导航菜单

  这个效果在http://demo.tutorialzine.com/2009/09/stylish-navigation-menu-jquery/ 上,其中的一个特色是点每个按钮时,会有上下跳跃的效果。教程在:http://tutorialzine.com/2009/09/stylish-navigation-menu-jquery/

  18 iPad风格的导航菜单

  

  这是一个象ipad风格的导航菜单。(http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu/),特别适用在层次比较多和复杂的菜单导航中,当导航时,能实现有点象ipad里菜单的效果,使用户可以快速返回上一层。

  19 字母导航菜单

  

  这个插件是以26个英文字母为顺序,当用户点每个英文字母时,会导航到该英文字母,并显示该字母下的分类内容,同时当鼠标移动到该字母上时,会在上方显示一个数字,表明该字母分类下有多少项属于该字母分类的内容。插件可以在:http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx中下载到。

  20 Lava Lamp

  这是一个色彩丰富,效果很cool的导航插件,当鼠标从左边扫向右边时,你会发现很cool的效果,插件在:http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/可以下载。

  【免责声明】本文仅代表作者本人观点,与和讯网无关。和讯网站对文中陈述、观点判断保持中立,不对所包含内容的准确性、可靠性或完整性提供任何明示或暗示的保证。请读者仅作参考,并请自行承担全部责任。

我有话说已有0位网友发言看看大家都说了啥

  您好,欢迎您发表评论!  (言论仅代表会员个人观点,不代表和讯网观点)

   

感谢您的参与!
查看[本文全部评论]

    订阅新闻  和讯微薄  添加到收藏夹  反馈意见

 

腾讯科技 | C114中国通信网 | 飞象网 | 中国家电网 | 挖贝网 | 手机中国 | 51nb专门网 | 科技讯 | 移动Labs | 通信世界网 | CTI论坛 | 赛迪网 | 新华网科技 | 中国软件网 | 中国质检网 | 通信产业网 | 比特网 | 支点网 | 上方网 | 小熊在线 | 速途网 | 易观网 | 慧聪家电网 | CNET科技资讯网 | 睿商在线 | 钛媒体 | 安卓网 | 光电新闻网 | 百道网 | 科技次世代网 | 人民网IT | 安智网 | 手机之家 | 环球家电网 | 新网 | 网秦 | iPhone威锋网 | 亿邦动力网 | 光明网IT | 环球网科技 | 虎嗅网 | e800 | 科易网 | 中国软件资讯网 | pc6软件下载 | DOIT| 安防知识网 | 站长网 | 第一家电网 | 科技资讯网 | 驱动中国 | 华北新闻网 | 蝌蚪五线谱网 | 大公科技 | 机房360 | 畅享网 | UC浏览器 | 移联名商 | 华强北 | 中国电子银行网 | 一财科技 | XDA智能手机网 | ZDNet至顶网| 蜂鸟网| e-works |博瑞网 |央广网科技 |会计家园 |

环球企业家 | 东方企业家 | 创业邦 | 数字商业时代 | 中国经济和信息化 | 商业周刊中文版 | 光明日报 | 新京报 | 法制晚报 | 北京青年报 | 中国计算机报 | 电脑报 | 申请友链
 

新闻热线:010-85651220

招商电话:010-85651220

E-mail: it@staff.hexun.com

地址:北京市朝阳区朝阳门外大街22号泛利大厦11层

邮编:100020

传真:010-85650806