[JavaScript]20个优秀的Javascript导航技术

简介:

【译文地址】:http://coolshell.cn/?p=918
【原始地址】:20 Excellent JavaScript Navigation Techniques and Examples

因为Javascript可以处理和用户的交互,所以使用Javascript会有更好的用户体验。在这篇文章里,你可以看到一些令人恐怖和独一无二的Javascript制作的导航条

1. MenuMatic

这个示例主要是展示了一个排序的纵向或横向的下拉式菜单导航条。

menumatic

演示页面

 

2. JQuery制作的动画按钮菜单

当鼠标经过的时候,按钮会有下压的感觉。

Animated Menu using jQuery

演示页面

3. jQuery 卷帘门特效导航条

Gaya Kessler 设计了这样一种卷帘门式导航条,相当的酷。

Garagedoor Effect using jQuery

演示页面

4. JGlide 菜单

一个独特的平面式菜单,整个菜单可以被随意拖动。

JGlide Menu

演示页面

5. jQuery 纵向滑动式菜单

HVDesigns 设计这个下拉式滑动式菜单。

Sliding jQuery Menu

演示页面

6. Perspective Tabs

这个技术很酷了,有点类似于iPhone,通过鼠标可以滚动导航条。

Perspective Tabs

演示页面

7. Digg.com式的下拉菜单

这个digg.com式的下拉菜单只使用了非常小的Javascript代码。

Vertical Digg-like Menu

8. LavaLamp

当鼠标经过的时候,菜单项上会有一个小阴影尾随着。以前,这样的技术基本上通过Flash完成的。

LavaLamp

9. 鱼眼菜单

鼠标经过的时候,图标会变得大起来。这个技术相当不错。

Fisheye Menu

10. 简单的JavaScript折叠式菜单

相当不错的一相折叠式菜单。

Simple JavaScript Accordions

演示页面

11. 高亮滑动式菜单

这个特效和第8个很类似。

Sliding JavaScript Menu Highlight

12. 高亮式菜单

鼠标经过的时候,菜单项会高亮起来。而没有鼠标的经过的时候,其是暗淡的。

Fading Menu - Replacing Content

 演示页面

13. 简单的多级下拉菜单

这是一个教程,教你怎么做这个菜单。

Simple Multi-level Drop-Down Menu

14. jQuery 制作的背景图动画菜单

Using jQuery for Background Image Animations

 演示页面

15. Mootools Redux

使用MooTools 制作的一个“鱼眼”式的导航条。

Mootools Redux

 演示页面

16. 折叠式边栏菜单

Using jQuery for Background Image Animations

17. UvumiTools 式的下拉菜单

另一个基于MooTools 制作的下拉菜单。

UvumiTools Dropdown Menu

18. jQuery UI Tabs

使用jQuery制作的Tab页.

jQuery UI Tabs

 演示页面

19. 右键菜单Proto.Menu

使用Prototype 框架制作的右键菜单。

Proto.Menu: Right Click Menu

20. 展开/收起式菜单

一个支持两层的有点类似于树形的菜单。

Accessible Expanding and Collapsing menu

演示页面


本文转自Justin博客园博客,原文链接:http://www.cnblogs.com/justinw/archive/2009/12/19/1627701.html,如需转载请自行联系原作者

相关文章
|
2月前
|
机器学习/深度学习 人工智能 自然语言处理
深度学习中的图像识别技术深入理解Node.js事件循环及其在后端开发中的应用
【8月更文挑战第27天】本文将介绍深度学习中的图像识别技术,包括其原理、应用领域及未来发展。我们将探讨如何通过神经网络实现图像识别,并分析其在医疗、交通等领域的应用。最后,我们将展望图像识别技术的发展前景。
|
2月前
|
运维 Cloud Native JavaScript
云端新纪元:云原生技术深度解析深入理解Node.js事件循环及其在异步编程中的应用
【8月更文挑战第27天】随着云计算技术的飞速发展,云原生已成为推动现代软件开发和运维的关键力量。本文将深入探讨云原生的基本概念、核心价值及其在实际业务中的应用,帮助读者理解云原生如何重塑IT架构,提升企业的创新能力和市场竞争力。通过具体案例分析,我们将揭示云原生技术背后的哲学思想,以及它如何影响企业决策和操作模式。
|
2月前
|
存储 JSON 监控
JavaScript 逆向基础篇:浏览器调试与 Hook 技术
JavaScript 逆向基础篇:浏览器调试与 Hook 技术
88 1
|
2月前
|
存储 JavaScript 前端开发
使用Vue.js构建交互式用户界面的技术探索
【8月更文挑战第9天】Vue.js以其简洁的API、高效的性能、灵活的架构和强大的组件系统,成为了构建现代Web应用交互式用户界面的理想选择。通过掌握Vue.js的核心概念和最佳实践,开发者可以轻松地构建出既美观又实用的Web应用。随着Vue.js生态的不断发展和完善,相信它将在未来继续引领前端开发的潮流
|
2月前
|
JavaScript 开发者 UED
Vue.js 错误处理与调试:跟上技术潮流,摆脱开发困扰,成为代码大神不是梦!
【8月更文挑战第30天】在 Vue.js 开发中,错误处理与调试至关重要。本文将对比 Vue 的全局错误捕获机制 `Vue.config.errorHandler` 和组件内 `watch` 监听数据变化的方式,并介绍 Vue 开发者工具、控制台打印 (`console.log`) 以及代码断点 (`debugger`) 等调试方法。此外,还将探讨如何通过自定义错误页面提升用户体验。通过这些技巧的对比,帮助开发者灵活选择适合的策略,确保应用稳定性和开发效率。
41 0
|
2月前
|
JavaScript 前端开发 开发者
Vue.js 响应式变革来袭!结合热点技术,探索从 Object.defineProperty 到 Proxy 的奇妙之旅,触动你的心
【8月更文挑战第30天】在 Vue.js 中,响应式系统自动追踪并更新数据变化,极大提升了开发体验。早期通过 `Object.defineProperty` 实现,但存在对新旧属性处理及数组操作的局限。Vue 3.0 引入了 `Proxy`,克服了上述限制,提供了更强大的功能和更好的性能。实践中,可根据项目需求选择合适的技术方案,并优化数据操作,利用懒加载等方式提升性能。
32 0
|
3月前
|
开发框架 JavaScript 前端开发
JavaScript框架比较与选择:技术深度剖析
【7月更文挑战第23天】选择正确的JavaScript框架是项目成功的关键。React.js、Vue.js、Angular和Svelte等前端框架各有千秋,分别适用于不同的项目需求。同时,Node.js及其后端框架为服务器端开发提供了强大的支持。开发人员应根据项目的复杂性、性能要求、开发周期以及团队技能等因素综合考虑,选择最适合的框架。随着技术的不断发展,未来还将涌现更多优秀的JavaScript框架,为开发者带来更多选择和可能性。
|
2月前
|
移动开发 JavaScript 前端开发
基于CSS3、原生JS、Vue3.0技术各自实现序列帧动画效果
这篇文章展示了如何使用纯CSS3、原生JavaScript以及Vue 3.0技术来实现序列帧动画效果,并通过代码示例和动画效果展示了每种方法的实现过程和最终效果。
64 0
|
2月前
|
存储 缓存 JavaScript
JavaScript——请列出目前主流的 JavaScript 模块化实现的技术有哪些?说出它们的区别?
JavaScript——请列出目前主流的 JavaScript 模块化实现的技术有哪些?说出它们的区别?
28 0
|
4月前
|
JavaScript 前端开发 程序员
探索Vue.js宝库:解锁基础知识与实用技能之门(1. 数据绑定与响应式 2. 条件与循环 3. 组件化开发;1. 路由管理与导航 2. 状态管理与Vuex 3. Vue.js的生命周期)
探索Vue.js宝库:解锁基础知识与实用技能之门(1. 数据绑定与响应式 2. 条件与循环 3. 组件化开发;1. 路由管理与导航 2. 状态管理与Vuex 3. Vue.js的生命周期)
42 1
下一篇
无影云桌面