[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,如需转载请自行联系原作者

相关文章
|
3天前
|
JSON JavaScript 前端开发
【JavaScript技术专栏】JavaScript的跨域通信方法
【4月更文挑战第30天】本文探讨了JavaScript中的跨域通信方法,包括:同源策略和跨域通信的概念,以及JSONP、CORS、WebSockets、`window.postMessage()`、代理服务器和WebAssembly的使用。这些技术各有优劣,适用于不同的场景,是Web开发者解决跨域问题的关键工具。随着Web技术的演进,跨域通信的解决方案也将不断更新。
|
3天前
|
机器学习/深度学习 人工智能 JavaScript
【JavaScript 与 TypeScript 技术专栏】JavaScript 与 TypeScript 的未来发展趋势
【4月更文挑战第30天】本文探讨了JavaScript和TypeScript的未来发展趋势。JavaScript将聚焦性能优化、跨平台开发、人工智能和WebAssembly的整合。TypeScript则将深化与其他框架的结合,强化类型检查,适应前端工程化,并与WebAssembly融合。两者在Vue 3.0及Web开发中的结合将更加紧密,TypeScript有望在更多领域扩展应用。随着技术进步,JavaScript和TypeScript的结合将成为Web开发的主流趋势。
|
3天前
|
JavaScript 前端开发 安全
【JavaScript与TypeScript技术专栏】TypeScript如何帮助JavaScript开发者避免常见错误
【4月更文挑战第30天】TypeScript,JavaScript的超集,通过静态类型检查和面向对象特性,帮助开发者避免类型错误、引用错误和逻辑错误,提升代码质量和可维护性。它引入类型注解、接口、可选链和空值合并,使代码更清晰、安全。对于大型项目,TypeScript的接口、类和泛型有助于代码结构化和模块化。学习TypeScript能提高JavaScript开发效率。
|
3天前
|
JavaScript 前端开发 IDE
【JavaScript与TypeScript技术专栏】使用TypeScript优化JavaScript应用性能
【4月更文挑战第30天】本文探讨了如何使用TypeScript优化JavaScript应用性能。TypeScript通过静态类型检查、更好的编译器优化和IDE支持提升代码稳定性和开发效率。利用类型注解、泛型、类与继承以及枚举和常量,开发者能构建高效、灵活和健壮的代码。逐步将TypeScript引入现有JavaScript项目,并通过案例分析展示性能提升效果。随着TypeScript社区的发展,它将在Web开发性能优化中扮演更重要角色。
|
3天前
|
开发框架 JavaScript 前端开发
【JavaScript 与 TypeScript 技术专栏】TypeScript 在 Web 开发中的前沿应用
【4月更文挑战第30天】TypeScript在Web开发中日益重要,以其强大的类型系统提升代码质量,支持组件化开发,与React、Vue、Angular等框架良好集成。在大型项目管理中,TypeScript助于代码组织和优化,提高团队协作效率。此外,它提升开发体验,提供智能提示和错误检测。众多成功案例证明其前沿应用,未来将在Web开发领域持续发挥关键作用。
|
3天前
|
JavaScript 前端开发 IDE
【JavaScript与TypeScript技术专栏】JavaScript与TypeScript混合编程模式探讨
【4月更文挑战第30天】本文探讨了在前端开发中JavaScript与TypeScript的混合编程模式。TypeScript作为JavaScript的超集,提供静态类型检查等增强功能,但完全切换往往不现实。混合模式允许逐步迁移,保持项目稳定性,同时利用TypeScript的优点。通过文件扩展名约定、类型声明文件和逐步迁移策略,团队可以有效结合两者。团队协作与沟通在此模式下至关重要,确保代码质量与项目维护性。
|
3天前
|
JavaScript 前端开发 IDE
【JavaScript与TypeScript技术专栏】TypeScript在JavaScript库与框架开发中的作用
【4月更文挑战第30天】TypeScript,微软开发的JavaScript超集,以其强类型和面向对象特性,正成为提升Web项目质量和效率的关键工具,尤其在库和框架开发中。它通过类型系统减少运行时错误,提供内置文档,便于重构,增强IDE支持,以及支持模块化。流行框架如React、Angular已支持TypeScript,未来有望成为开发高质量库和框架的标准语言。随着社区增长,TypeScript将在Web开发领域扮演更重要角色。
|
3天前
|
JavaScript 前端开发 开发工具
【JavaScript 与 TypeScript 技术专栏】TypeScript 如何提升 JavaScript 代码的可读性与可维护性
【4月更文挑战第30天】TypeScript 提升 JavaScript 代码的可读性和可维护性,主要通过静态类型系统、增强代码组织、智能提示与错误检测、文档化和在大型项目中的优势。静态类型减少误解,类和接口提供结构,智能提示提高编码效率,类型注解充当内置文档。在大型项目中,TypeScript 降低理解差异,平滑迁移现有 JavaScript 项目,助力提高开发效率和项目质量。
|
3天前
|
监控 JavaScript 前端开发
【JavaScript与TypeScript技术专栏】TypeScript在JavaScript项目中的渐进式采用
【4月更文挑战第30天】TypeScript是JavaScript的超集,引入静态类型、接口等特性,提升代码安全性和可读性。在JavaScript项目中采用TypeScript可享受类型安全、社区支持及优秀工具集成等优势。渐进式采用策略包括评估项目现状、逐步引入新旧模块、编写类型定义文件、配置编译选项和编写测试用例,以提高项目质量和效率。
|
3天前
|
JavaScript 前端开发 编译器
【JavaScript与TypeScript技术专栏】从JavaScript迁移到TypeScript的最佳实践
【4月更文挑战第30天】本文介绍了从 JavaScript 迁移到 TypeScript 的最佳实践。首先,学习 TypeScript 基础并安装编译器。接着,采取逐步迁移策略,保持与 JavaScript 兼容,利用类型定义和接口增强代码可读性。此外,借助 TSLint 和 Prettier 保证代码质量与风格一致性,使用类型定义文件提升第三方库的可维护性。