[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月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
55 1
|
3月前
|
JavaScript 前端开发 中间件
探索后端技术:Node.js与Express框架的完美融合
【10月更文挑战第7天】 在当今数字化时代,Web应用已成为日常生活不可或缺的一部分。本文将深入探讨后端技术的两大重要角色——Node.js和Express框架,分析它们如何通过其独特的特性和优势,为现代Web开发提供强大支持。我们将从Node.js的非阻塞I/O和事件驱动机制,到Express框架的简洁路由和中间件特性,全面解析它们的工作原理及应用场景。此外,本文还将分享一些实际开发中的小技巧,帮助你更有效地利用这些技术构建高效、可扩展的Web应用。无论你是刚入门的新手,还是经验丰富的开发者,相信这篇文章都能为你带来新的启发和思考。
|
3月前
|
JavaScript 前端开发 API
探索后端技术:Node.js的优势和实际应用
【10月更文挑战第6天】 在当今数字化时代,后端开发是任何成功软件应用的关键组成部分。本文将深入探讨一种流行的后端技术——Node.js,通过分析其核心优势和实际应用案例,揭示其在现代软件开发中的重要性和潜力。
213 2
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
62 5
|
2月前
|
JavaScript 前端开发 中间件
JS服务端技术—Node.js知识点
本文介绍了Node.js中的几个重要模块,包括NPM、Buffer、fs模块、path模块、express模块、http模块以及mysql模块。每部分不仅提供了基础概念,还推荐了相关博文供深入学习。特别强调了express模块的使用,包括响应相关函数、中间件、Router和请求体数据解析等内容。文章还讨论了静态资源无法访问的问题及其解决方案,并总结了一些通用设置。适合Node.js初学者参考学习。
51 1
|
3月前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
37 3
|
3月前
|
缓存 前端开发 JavaScript
探索JavaScript的现代前端技术:从基础到进阶
探索JavaScript的现代前端技术:从基础到进阶
73 1
|
5月前
|
机器学习/深度学习 人工智能 自然语言处理
深度学习中的图像识别技术深入理解Node.js事件循环及其在后端开发中的应用
【8月更文挑战第27天】本文将介绍深度学习中的图像识别技术,包括其原理、应用领域及未来发展。我们将探讨如何通过神经网络实现图像识别,并分析其在医疗、交通等领域的应用。最后,我们将展望图像识别技术的发展前景。
|
5月前
|
运维 Cloud Native JavaScript
云端新纪元:云原生技术深度解析深入理解Node.js事件循环及其在异步编程中的应用
【8月更文挑战第27天】随着云计算技术的飞速发展,云原生已成为推动现代软件开发和运维的关键力量。本文将深入探讨云原生的基本概念、核心价值及其在实际业务中的应用,帮助读者理解云原生如何重塑IT架构,提升企业的创新能力和市场竞争力。通过具体案例分析,我们将揭示云原生技术背后的哲学思想,以及它如何影响企业决策和操作模式。
|
5月前
|
存储 JSON 监控
JavaScript 逆向基础篇:浏览器调试与 Hook 技术
JavaScript 逆向基础篇:浏览器调试与 Hook 技术
450 1
下一篇
开通oss服务