PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> Javascript >> 

再看七个经典jQuery网站导航脚本推荐

再看七个经典jQuery网站导航脚本推荐

来源:PHP程序员站  作者:  发布时间:2011-02-20
JQuery是现在流行的Javascrīpt框架,同时,在网页里,JQuery导航菜单的功能是非常漂亮和强大的,它能告诉你要寻找信息的准确位置。在jQuery中,有众多的优秀的脚本可以帮助你去实现某一方面的功能,本文将选取了2011年初7个最经典的jQuery菜单,希望大家能喜欢。 1、Cu
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/),将会学习到如何使用cssjavascript和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/。


延伸阅读:
div+css:tab风格导航
一个分页导航源码
很眩的半透明下拉菜单导航条
css做的一个很漂亮的分页导航
25个优秀的下拉菜单导航脚本
WML教程3:任务与导航-赋值与数据交换
Tags: jQuery   导航   脚本  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号