Skip to content

20个优秀的Javascript导航技术

以前向大家介绍过 《30种时尚的CSS网站导航条》。这里,我们将向大家介绍一下使用Javascript设计的WEB页面的导航条。

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

1. MenuMatic

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

http://images.sixrevisions.com/2009/04/29-02_menu_matic.jpg

演示页面

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

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

http://images.sixrevisions.com/2009/04/29-07_animated_menu.jpg

演示页面

3. jQuery 卷帘门特效导航条

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

http://images.sixrevisions.com/2009/04/29-01_garage_door.jpg

演示页面

4. JGlide 菜单

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

http://images.sixrevisions.com/2009/04/29-18_jglide.jpg

演示页面

5. jQuery 纵向滑动式菜单

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

http://images.sixrevisions.com/2009/04/29-03_verticle_sliding.jpg

演示页面

6. Perspective Tabs

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

http://images.sixrevisions.com/2009/04/29-13_mootools_tabs.jpg

演示页面

7. Digg.com式的下拉菜单

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

http://images.sixrevisions.com/2009/04/29-09_digg_like_menu.jpg

8. LavaLamp

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

http://images.sixrevisions.com/2009/04/29-14_mootools_fancy_menu.jpg

9. 鱼眼菜单

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

http://images.sixrevisions.com/2009/04/29-17_fisheye.jpg

10. 简单的JavaScript折叠式菜单

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

http://images.sixrevisions.com/2009/04/29-04_javascript_accordian.jpg

演示页面

11. 高亮滑动式菜单

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

http://images.sixrevisions.com/2009/04/29-08_highlight_menu.jpg

12. 高亮式菜单

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

http://images.sixrevisions.com/2009/04/29-05_fading_menu.jpg

演示页面

13. 简单的多级下拉菜单

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

http://images.sixrevisions.com/2009/04/29-06_multil_level_drop_down.jpg

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

http://images.sixrevisions.com/2009/04/29-12_background_position.jpg

演示页面

15. Mootools Redux

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

http://images.sixrevisions.com/2009/04/29-10_mootools_demo.jpg

演示页面

16. 折叠式边栏菜单

http://images.sixrevisions.com/2009/04/29-11_hover_accordion.jpg

17. UvumiTools 式的下拉菜单

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

http://images.sixrevisions.com/2009/04/29-15_uvumitools%20_menu.jpg

18. jQuery UI Tabs

使用jQuery制作的Tab页.

http://images.sixrevisions.com/2009/04/29-16_jquery_ui_tabs.jpg

演示页面

19. 右键菜单Proto.Menu

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

http://images.sixrevisions.com/2009/04/29-19_right_click.jpg

20. 展开/收起式菜单

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

http://images.sixrevisions.com/2009/04/29-20_exp_col_menu.jpg

演示页面

文章:来源

(转载本站文章请注明作者和出处 酷 壳 – CoolShell ,请勿用于任何商业用途)

相关文章