再看七个经典jQuery网站导航脚本推荐
2011-05-17 19:50:23 来源:本站整理 JQuery是现在流行的Javascrīpt框架,同时,在网页里,JQuery导航菜单的功能是非常漂亮和强大的,它能告诉你要寻找信息的准确位置。在jQuery中,有众多的优秀的脚本可以帮助你去实现某一方面的功能,本文将选取了2011年初7个最经典的jQuery菜单,希望大家能喜欢。
1、Cut And Paste jQuery 菜单 这个菜单的特点是,只要你设置好了一个锚点(比如在按钮或者链接上),就可以设置多列的导航菜单,如上图。在上面的图中点某个按钮,就会弹出如下的导航菜单。这个菜单的代码可以在http://www.javascriptkit.com/script/script2/jkmegamenu.shtml中下载。 2、带搜索框和下拉框的导航菜单 这个导航菜单的效果在http://tympanus.net/Tutorials/UIElements/SearchBox/可以看到,当用户在输入框中鼠标点击时,会弹出下拉框,其中有很多个复选框,用户可以选择这些复选框进行选择,然后再提交到后台进行处理。这个菜单的代码下载在http://tympanus.net/codrops/2010/07/14/ui-elements-search-box/可以下载到。 3、简洁冷色调的一款jQuery导航菜单 研究表明,用户进入网页的第一眼,往往就会被导航菜单所注意到。现在很多导航菜单都搞的很花俏,如果你不喜欢花俏的话,可以尝试根据下面这个教程去学习,去学习做一个如上图的导航菜单,其风格是简单而显得冷色调。教程在http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html可以看到。 4、jQuery配合动画效果的导航菜单 在这个教程中(http://www.shopdev.co.uk/blog/animated-menus-using-jquery/),将会学习到如何使用css,javascript和xhtml去简单打造一个有动画效果的导航菜单。 5、使用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/。 6、非常小巧的jQuery导航菜单 这个菜单的效果及教程在http://javascript-array.com/scripts/jquery_simple_drop_down_menu/中可以看到,它的文件体积很小,而且代码不多,代码就20多行,使用十分方便,而且兼容IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+等各类浏览器。 7、跳跃式效果的导航菜单
这个效果在http://demo.tutorialzine.com/2009/09/stylish-navigation-menu-jquery/ 上,其中的一个特色是点每个按钮时,会有上下跳跃的效果。教程在:http://tutorialzine.com/2009/09/stylish-navigation-menu-jquery/。
更多精彩
赞助商链接