多款令人震撼的JavaScript導航技術

因為Javascript可以處理和使用者的互動，所以使用Javascript會有更好的使用者體驗。在這篇文章裡，你可以看到一些令人恐怖和獨一無二的Javascript製作的導航條。（相關閱讀：完美HTML導航條最佳實務）

1. MenuMatic

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

示範地址：http://greengeckodesign.com/menumatic

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

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

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

3. jQuery捲簾門特效導航條

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

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

4. JGlide菜單

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

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

5. jQuery縱向滑動式菜單

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

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

 

6. Perspective Tabs

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

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

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

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

示範地址：http://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/articles/fisheye-javascript-menu

10. 簡單的JavaScript摺疊式菜單

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

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

 

11. 高亮滑動式菜單

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

示範地址：http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/

12. 高亮式菜單

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

示範地址：http://css-tricks.com/learning-jquery-fading-menu-replacing-content/

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

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

示範地址：http://javascript-array.com/scripts/simple_drop_down_menu/

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

示範地址：http://snook.ca/archives/javascript/jquery-bg-image-animations/

15. Mootools Redux

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

示範地址：http://www.chromasynthetic.com/blog/

 

16. 摺疊式側邊欄菜單

示範地址：http://berndmatzner.de/jquery/hoveraccordion/

17. UvumiTools 式的下拉式功能表

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

示範地址：http://uvumitools.com/dropdown.html

18. jQuery UI Tabs

使用jQuery製作的Tab頁.

示範地址：http://stilbuero.de/jquery/tabs_3/

19. 右鍵菜單Proto.Menu

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

示範地址：http://kangax.github.com/proto.menu/

20. 展開/收合式菜單

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

示範地址：http://www.456bereastreet.com/archive/200705/accessible_expanding_and_collapsing_menu/

原文地址：http://www.ziyue.info/20%E4%B8%AA%E4%BC%98%E7%A7%80%E7%9A%84javascript%E5%AF%BC%E8%88%AA%E6%8A%80%E6%9C%AF/