20个优秀的Javascript导航技术
原文：酷壳 – CoolShell · 陈皓 · 2009-05-26 · 13,672 人阅读
以前向大家介绍过 《30种时尚的CSS网站导航条》。这里，我们将向大家介绍一下使用Javascript设计的WEB页面的导航条。
因为Javascript可以处理和用户的交互，所以使用Javascript会有更好的用户体验。在这篇文章里，你可以看到一些令人恐怖和独一无二的Javascript制作的导航条。
1. MenuMatic
这个示例主要是展示了一个排序的纵向或横向的下拉式菜单导航条。
[
](http://greengeckodesign.com/projects/menumatic/examples/vertical/)
2. JQuery制作的动画按钮菜单
当鼠标经过的时候，按钮会有下压的感觉。
[
](http://www.shopdev.co.uk/blog/menuDemo.html)
3. jQuery 卷帘门特效导航条
Gaya Kessler 设计了这样一种卷帘门式导航条，相当的酷。
[
](http://www.gayadesign.com/scripts/jquerygaragedoor/)
4. JGlide 菜单
一个独特的平面式菜单，整个菜单可以被随意拖动。
[
](http://sonicradish.com/labs/jGlideMenu/current/static_demo.html)
5. jQuery 纵向滑动式菜单
HVDesigns 设计这个下拉式滑动式菜单。
[
](http://www.hv-designs.co.uk/tutorials/sliding_menu/sliding_menu.html)
6. Perspective Tabs
这个技术很酷了，有点类似于iPhone，通过鼠标可以滚动导航条。
[
](http://www.mattweltman.com/sliding_tabs.html)
7. Digg.com式的下拉菜单
这个digg.com式的下拉菜单只使用了非常小的Javascript代码。
[
](https://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html)
8. LavaLamp
当鼠标经过的时候，菜单项上会有一个小阴影尾随着。以前，这样的技术基本上通过Flash完成的。
[
](http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/)
9. 鱼眼菜单
鼠标经过的时候，图标会变得大起来。这个技术相当不错。
[
](http://marcgrabanski.com/pages/code/fisheye-menu)
10. 简单的JavaScript折叠式菜单
相当不错的一相折叠式菜单。
[
](http://www.dezinerfolio.com/uploads/accordemo/01.html)
11. 高亮滑动式菜单
这个特效和第8个很类似。
[
](http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/)
12. 高亮式菜单
鼠标经过的时候，菜单项会高亮起来。而没有鼠标的经过的时候，其是暗淡的。
[
](https://css-tricks.com/examples/MenuFader/)
13. 简单的多级下拉菜单
这是一个教程，教你怎么做这个菜单。
[
](http://javascript-array.com/scripts/simple_drop_down_menu/)
14. jQuery 制作的背景图动画菜单
[
](http://snook.ca/technical/jquery-bg/)
15. Mootools Redux
使用MooTools 制作的一个“鱼眼”式的导航条。
[
](http://www.chromasynthetic.com/blog/uploads/mootools_nav_example.html)
16. 折叠式边栏菜单
[
](http://berndmatzner.de/jquery/hoveraccordion/)
17. UvumiTools 式的下拉菜单
另一个基于MooTools 制作的下拉菜单。
[
](http://tools.uvumi.com/dropdown.html)
18. jQuery UI Tabs
使用jQuery制作的Tab页.
[
](http://stilbuero.de/jquery/tabs_3/)
19. 右键菜单Proto.Menu
使用Prototype 框架制作的右键菜单。
[
](http://yura.thinkweb2.com/scripting/contextMenu/)
20. 展开/收起式菜单
一个支持两层的有点类似于树形的菜单。
[
](http://www.456bereastreet.com/lab/accessible-expanding-collapsing-menu/)
文章：来源
（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）
转载请注明作者和出处：酷壳 – CoolShell。本文仅供学习，请勿用于商业用途。