20个优秀JavaScript 导航技巧与实例

JavaScript允许你在网页中添加交互和反馈，使得用户体验更棒也更直观。

在这篇文章中，你将发现一些非常棒的、独特的JavaScript导航技巧和实例。

小贴士：如果图片是单独在一个页面上而没有“查看演示页面”的提示，点击每张图片将直接跳转到导航菜单技巧的演示页面。而点击该技巧的名称则将跳转到其开发项目组网页上。

1. MenuMatic

这个实例包含根据首字母排序或者乱序的链接菜单，并且可以将其转变成动态下拉菜单，可以使垂向的，也可以是横向的。

查看演示页面

 

2. 使用jQuery的Animated Menu

这是一个当用户鼠标停留其上会显示动态菜单的技巧。源文件包括PSD（PSD是Adobe Photoshop的文件格式）提供下载。

查看演示页面

3. 使用jQuery的车库门效果

Gaya Kessler呈现了一个奇特的JavaScript菜单，它利用jQuery模拟了真实的车库门的效果。

查看演示页面

4. JGlide滑动菜单

一个漂浮在页面上的独特的菜单。用户可以拖动它到任何一个想要的地方。

查看演示页面

5. 垂向滑动jQuery菜单

HVDesigns呈现一个下拉菜单，下拉菜单能显示更多链接。

查看演示页面

6. 透视效果标签

你可以使用这个技术产生带动画效果的滚动标签条。

查看演示页面

7. 垂向类Digg菜单

Antonio Lupetti presents a Digg-like menu that uses simple JavaScript.Antonio Lupetti使用简单的JavaScript展示一个类似Digg的菜单。

8. 火焰灯

当你把鼠标停留在一个选项上，你将看到使用jQuery的CSS滑动门效果产生。另一个代替版本Mootols在这里可访问。

9. 鱼眼菜单

如果你是一个超级Mac dock迷，那么你会喜欢这个菜单。

10. 简单JavaScript手风琴效果菜单

一个很好的复合手风琴状菜单。

查看演示页面

11. 滑动高亮显示JavaScript菜单

这个滑动悬停效果脚本用来高亮显示菜单选项是一个很简单的技术。

12. 淡入淡出菜单-更改内容

这个技巧允许你淡入淡出菜单项目。

查看演示页面

13. 简单多级下拉菜单

一个简单的JavaScript下拉菜单。

14. 使用jQuery做背景图片的动画效果

一个使用jQuery和CSS背景位移属性创建动态菜单的技巧。

查看演示页面

15. Mootools Redux

一个使用MooTools实现当你把鼠标放在选项上时链接字体变大的菜单。

查看演示页面

16. 悬停手风琴/侧边菜单

这是一个可以用来做垂向侧边菜单的手风琴插件。

17. UvumiTools下拉菜单

另一个基于MooTools、拥有更多特色的JavaScript菜单。

18. jQuery UI 标签

使用这款标签实例轻松分开内容。

查看演示页面

19. Proto菜单：右键菜单

一个在Prototype框架上编写的用户可自定义右键菜单。

20. 可扩展压缩菜单

这个菜单实例允许你拥有两级导航。当你在主列表单击，次级列表会展开。

查看演示页面

那你呢，你在使用什么？

 

关于作者

Kawasar Ali 是一位网页设计者，美术设计者，并且希望成为美国纽约的摄影师。他同时是Desizntech的创建者，Desizntech是一个查找关于网页设计、苹果Mac、PC以及其他问题的帮助的网站。如果你希望联系他，你可以在他的Twitter上或在他的个人网站上留言。