日期:2014-05-16  浏览次数:20510 次

20个优秀的Javascript导航技术

本文我们将向大家介绍一下使用Javascript设计的Web页面的导航条,因为Javascript可以处理和用户的交互,所以使用Javascript会有更好的用户体验。

<script src="http://www.51cto.com/js/article/keywords_ad_new.js"></script> ?

?

因为Javascript可以处理和用户的交互,所以使用Javascript会有更好的用户体验。在这篇文章里,你可以看到一些令人恐怖和独一无二的Javascript制作的导航条。(相关阅读:完美HTML导航条最佳实践

1. MenuMatic

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

MenuMatic

演示地址:http://greengeckodesign.com/menumatic

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

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

jQuery制作的动画按钮菜单

演示地址:http://www.shopdev.co.uk/blog/animated-menus-using-jquery/

3. jQuery卷帘门特效导航条

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

jQuery卷帘门特效导航条

演示地址:http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/

4. JGlide菜单

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

JGlide菜单

演示地址:http://sonicradish.com/labs/jGlideMenu/current/?src=ASL_LAB

5. jQuery纵向滑动式菜单

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

jQuery纵向滑动式菜单

演示地址:http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/

6. Perspective Tabs

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

Perspective Tabs

演示地址:http://www.mattweltman.com/sliding_tabs.html

7. Digg.com式的下拉菜单

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

Digg.com式的下拉菜单

演示地址:http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html

8. LavaLamp

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

LavaLamp

演示地址:http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

9. 鱼眼菜单

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

鱼眼菜单

演示地址:http://marcgrabanski.com/articles/fisheye-javascript-menu

10. 简单的JavaScript折叠式菜单

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

简单的JavaScript折叠式菜单

演示地址:http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/