[JavaScript]20個優秀的Javascript導航技術

【譯文地址】：http://coolshell.cn/?p=918
【原始地址】：20 Excellent JavaScript Navigation Techniques and Examples

因為Javascript可以處理和使用者的互動，所以使用Javascript會有更好的使用者體驗。在這篇文章裡，你可以看到一些令人恐怖和獨一無二的Javascript製作的導航條。

1. MenuMatic

這個樣本主要是展示了一個排序的縱向或橫向的下拉式菜單導航條。

示範頁面

 

2. JQuery製作的動畫按鈕菜單

當滑鼠經過的時候，按鈕會有下壓的感覺。

示範頁面

3. jQuery 捲簾門特效導航條

Gaya Kessler 設計了這樣一種捲簾門式導航條，相當的酷。

示範頁面

4. JGlide 菜單

一個獨特的平面式菜單，整個菜單可以被隨意拖動。

示範頁面

5. jQuery 縱向滑動式菜單

HVDesigns 設計這個下拉式滑動式菜單。

示範頁面

6. Perspective Tabs

這個技術很酷了，有點類似於iPhone，通過滑鼠可以滾動導航條。

示範頁面

7. Digg.com式的下拉式功能表

這個digg.com式的下拉式功能表只使用了非常小的Javascript代碼。

8. LavaLamp

當滑鼠經過的時候，功能表項目上會有一個小陰影尾隨著。以前，這樣的技術基本上通過Flash完成的。

9. 魚眼菜單

滑鼠經過的時候，表徵圖會變得大起來。這個技術相當不錯。

10. 簡單的JavaScript摺疊式菜單

相當不錯的一相摺疊式菜單。

示範頁面

11. 高亮滑動式菜單

這個特效和第8個很類似。

12. 高亮式菜單

滑鼠經過的時候，功能表項目會高亮起來。而沒有滑鼠的經過的時候，其是暗淡的。

 示範頁面

13. 簡單的多級下拉式功能表

這是一個教程，教你怎麼做這個菜單。

14. jQuery 製作的背景圖動畫菜單

 示範頁面

15. Mootools Redux

使用MooTools 製作的一個“魚眼”式的導航條。

 示範頁面

16. 摺疊式側邊欄菜單

17. UvumiTools 式的下拉式功能表

另一個基於MooTools 製作的下拉式功能表。

18. jQuery UI Tabs

使用jQuery製作的Tab頁.

 示範頁面

19. 右鍵菜單Proto.Menu

使用Prototype 架構製作的右鍵菜單。

20. 展開/收合式菜單

一個支援兩層的有點類似於樹形的菜單。

示範頁面