本文我们将向大家介绍一下使用Javascript设计的Web页面的导航条,因为Javascript可以处理和用户的交互,所以使用Javascript会有更好的用户体验。
<script src="http://www.51cto.com/js/article/keywords_ad_new.js"></script>
因为Javascript可以处理和用户的交互,所以使用Javascript会有更好的用户体验。在这篇文章里,你可以看到一些令人恐怖和独一无二的Javascript制作的导航条。(相关阅读:
完美HTML导航条最佳实践)
1. MenuMatic
这个示例主要是展示了一个排序的纵向或横向的下拉式菜单导航条。
演示地址:http://greengeckodesign.com/menumatic
2. jQuery制作的动画按钮菜单
当鼠标经过的时候,按钮会有下压的感觉。
演示地址:http://www.shopdev.co.uk/blog/animated-menus-using-jquery/
3. jQuery卷帘门特效导航条
Gaya Kessler 设计了这样一种卷帘门式导航条,相当的酷。
演示地址:http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/
4. JGlide菜单
一个独特的平面式菜单,整个菜单可以被随意拖动。
演示地址:http://sonicradish.com/labs/jGlideMenu/current/?src=ASL_LAB
5. jQuery纵向滑动式菜单
HVDesigns设计这个下拉式滑动式菜单。
演示地址:http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/
6. Perspective Tabs
这个技术很酷了,有点类似于iPhone,通过鼠标可以滚动导航条。
演示地址:http://www.mattweltman.com/sliding_tabs.html
7. Digg.com式的下拉菜单
这个digg.com式的下拉菜单只使用了非常小的Javascript代码。
演示地址:http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html
8. LavaLamp
当鼠标经过的时候,菜单项上会有一个小阴影尾随着。以前,这样的技术基本上通过Flash完成的。
演示地址:http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
9. 鱼眼菜单
鼠标经过的时候,图标会变得大起来。这个技术相当不错。
演示地址:http://marcgrabanski.com/articles/fisheye-javascript-menu
10. 简单的JavaScript折叠式菜单
相当不错的一相折叠式菜单。
演示地址:http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/
11. 高亮滑动式菜单
这个特效和第8个很类似。
演示地址:http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/
12. 高亮式菜单
鼠标经过的时候,菜单项会高亮起来。而没有鼠标的经过的时候,其是暗淡的。
演示地址:http://css-tricks.com/learning-jquery-fading-menu-replacing-content/
13. 简单的多级下拉菜单
这是一个教程,教你怎么做这个菜单。
演示地址:http://javascript-array.com/scripts/simple_drop_down_menu/
14. jQuery制作的背景图动画菜单
演示地址:http://snook.ca/archives/javascript/jquery-bg-image-animations/
15. Mootools Redux
使用MooTools制作的一个“鱼眼”式的导航条。
演示地址:http://www.chromasynthetic.com/blog/
16. 折叠式边栏菜单
演示地址:http://berndmatzner.de/jquery/hoveraccordion/
17. UvumiTools 式的下拉菜单
另一个基于MooTools制作的下拉菜单。
演示地址:http://uvumitools.com/dropdown.html
18. jQuery UI Tabs
使用jQuery制作的Tab页.
演示地址:http://stilbuero.de/jquery/tabs_3/
19. 右键菜单Proto.Menu
使用Prototype 框架制作的右键菜单。
演示地址:http://kangax.github.com/proto.menu/
20. 展开/收起式菜单
一个支持两层的有点类似于树形的菜单。
演示地址:http://www.456bereastreet.com/archive/200705/accessible_expanding_and_collapsing_menu/
分享到:
相关推荐
利用JavaScript技术建立馆藏外文电子期刊导航系统.pdf
Web技术之家文章简介:HTML网页超链接标记学习教程 链接标记的属性 链接是网页页面中最重要的元素之一,是一个网站的灵魂。一个网站是由多个页面组成的,页面之间依靠链接确定相互的导航关系。每一个网页都有...
比较好看的树形导航是用js编写出来的,开发OA办公系统用到,希望大家能够有用
本项目是基于PHP的仿苹果界面导航网站设计源码,包含243个文件,其中154个GIF文件,32个JavaScript文件,20个PNG文件,9个CSS文件,9个PHP文件和7个HTML文件。该网站是一个简易的导航网站,采用了仿苹果界面设计,...
为了帮助我国广大计算机用户尽快了解和掌握这些新技术,本着先进的技术,要大家分享的原则,电脑网络学校特组织JavaScript技术讲座。其各讲内容为: 第一讲 JavaScript语言概况 第二讲 JavaScript基本数据结构 第三讲...
一个导航网,使用了bootstrap,Ajax,artTemplate,json,php等技术
◆ 可参考的JavaScript 代码:预载入图片实现导航按钮的动态变化效果; ◆ 可参考的JavaScript 代码:显示对象的提示信息; ◆ 可参考的JavaScript 代码:精美的日历; ◆ 可参考的JavaScript 代码:下拉菜单; ...
项目简介:此项目采用Python为主要开发语言,融合了JavaScript、CSS、HTML等多种技术,构建了一个高效、实用的导航页。项目文件总计2774个,其中包含1622个SVG图像文件,727个PNG图片文件,以及97个核心的Python脚本...
文件类型包括36个PNG图片文件、19个SVG文件、12个Vue组件文件、10个JavaScript脚本文件、4个JPG图片文件、2个JSON配置文件、2个ICO图标文件、1个Browserslistrc文件、1个Git忽略文件和1个LICENSE文件。该系统是使用...
第二部分 客户端JavaScript 第13章 Web浏览器中的JavaScript 13.1 客户端JavaScript 13.2 在HTML里嵌入JavaScript 13.3 JavaScript程序的执行 13.4 兼容性和互用性 13.5 可访问性 13.6 安全性 13.7 客户端框架 第14...
这是一个基于Spring Boot和Vue3的导航网站前后端分离设计,使用...该项目是一个基于Spring Boot、MyBatis Plus、Vue3和Element Plus的导航网站,适合用于个人学习和实践Java、JavaScript、Vue、HTML和CSS的开发技术。
《JavaScript基础教程(第8版)》循序渐进地讲述了JavaScript及相关的CSS、DOM、Ajax、jQuery等技术。书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上...
10.12 用JavaScript生成面包屑导航 10.13 复选框的反选 10.14 选中所有复选框 10.15 复选框全选(二) 10.16 改变slsect选中项的颜色特效 第11章 颜色处理和菜单特效 11.1 背景颜色测试 11.2 RGB颜色在线转换 11.3 ...
从颇具深度的javascript语言基础到作用域(链),从引用类型到面向对象编程,从极其灵活的匿名函数到闭包的内部机制,从浏览器对象模型(bom)、文档对象模型(dom)到基于事件的web脚本设计,从xml(fax)到ajax及json,从...
JavaScript技术讲座 编者按:JavaScript是由Netscape公司开发并随Navigator导航者一起发布的、介于Java与HTML之间、基于对象事件驱动的编程语言,正日益受到全球的关注。因它的开发环境简单,不需要Java编译器,...
本书以网站开发者在开发中遇到的实际问题和应该掌握的技术为中心,全面介绍了JavaScript在网站开发中各个方面的常用技术和技巧。全书共19章,分别是窗口/框架与导航条设计、表单及表单元素、实用JavaScript函数、...
JavaScript实例精通 1.本书1~20章所附代码的运行环境 操作系统:Windows 2003、Windows XP Professional,或者Windows 2000 开发环境:、Dreamwave、Notepad、UltraEdit,或者其他文本编辑器 Web服务器:IIS 5.1及...
第二部分 客户端javascript 第13章 web浏览器中的javascript 309 13.1 客户端javascript 309 13.2 在html里嵌入javascript 313 13.3 javascript程序的执行 319 13.4 兼容性和互用性 326 13.5 可访问性 333 13.6 安全...
JavaScript是由Netscape公司开发并随Navigator导航者一起发布的、介于Java与HTML之间...为了帮助我国广大计算机用户尽快了解和掌握这些新技术,本着先进的技术,要大家分享的原则,电脑网络学校特组织JavaScript技术讲座。
JavaScript是由Netscape公司开发并随Navigator导航者一起发布的、介于Java与HTML之间...为了帮助我国广大计算机用户尽快了解和掌握这些新技术,本着先进的技术,要大家分享的原则,电脑网络学校特组织JavaScript技术讲座。