[轉載] 20個令人恐怖的JavaScript導航技術

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

1. MenuMatic
這個示例主要是展示了一個排序的縱向或橫向的下拉式菜單導航條。
[/url]
演示地址：[url=http://greengeckodesign.com/menumatic]http://greengeckodesign.com/menumatic



2. jQuery製作的動畫按鈕菜單
當鼠標經過的時候，按鈕會有下壓的感覺。
[/url]
演示地址：[url=http://www.shopdev.co.uk/blog/animated-menus-using-jquery/]http://www.shopdev.co.uk/blog/animated-menus-using-jquery/



3. jQuery捲簾門特效導航條
Gaya Kessler 設計了這樣一種捲簾門式導航條，相當的酷。
[/url]
演示地址：[url=http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/]http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/



4. JGlide菜單
一個獨特的平面式菜單，整個菜單可以被隨意拖動。
[/url]
演示地址：[url=http://sonicradish.com/labs/jGlideMenu/current/?src=ASL_LAB]http://sonicradish.com/labs/jGlideMenu/current/?src=ASL_LAB



5. jQuery縱向滑動式菜單
HVDesigns設計這個下拉式滑動式菜單。
[/url]
演示地址：[url=http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/]http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/



6. Perspective Tabs
這個技術很酷了，有點類似於iPhone，通過鼠標可以滾動導航條。
[/url]
演示地址：[url=http://www.mattweltman.com/sliding_tabs.html]http://www.mattweltman.com/sliding_tabs.html



7. Digg.com式的下拉菜單
這個digg.com式的下拉菜單隻使用了非常小的Javascript代碼。
[/url]
演示地址：[url=http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html]http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html



8. LavaLamp
當鼠標經過的時候，菜單項上會有一個小陰影尾隨着。以前，這樣的技術基本上通過Flash完成的。
[/url]
演示地址：[url=http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/]http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/



9. 魚眼菜單
鼠標經過的時候，圖標會變得大起來。這個技術相當不錯。
[/url]
演示地址：[url=http://marcgrabanski.com/articles/fisheye-javascript-menu]http://marcgrabanski.com/articles/fisheye-javascript-menu



10. 簡單的JavaScript摺疊式菜單
相當不錯的一相摺疊式菜單。
[/url]
演示地址：[url=http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/]http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/



11. 高亮滑動式菜單
這個特效和第8個很類似。
[/url]
演示地址：[url=http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/]http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/



12. 高亮式菜單
鼠標經過的時候，菜單項會高亮起來。而沒有鼠標的經過的時候，其是暗淡的。
[/url]
演示地址：[url=http://css-tricks.com/learning-jquery-fading-menu-replacing-content/]http://css-tricks.com/learning-jquery-fading-menu-replacing-content/



13. 簡單的多級下拉菜單
這是一個教程，教你怎麼做這個菜單。
[/url]
演示地址：[url=http://javascript-array.com/scripts/simple_drop_down_menu/]http://javascript-array.com/scripts/simple_drop_down_menu/



14. jQuery製作的背景圖動畫菜單
[/url]
演示地址：[url=http://snook.ca/archives/javascript/jquery-bg-image-animations/]http://snook.ca/archives/javascript/jquery-bg-image-animations/



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

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



16. 摺疊式邊欄菜單
[/url]
演示地址：[url=http://berndmatzner.de/jquery/hoveraccordion/]http://berndmatzner.de/jquery/hoveraccordion/



17. UvumiTools 式的下拉菜單
另一個基於MooTools製作的下拉菜單。
[/url]
演示地址：[url=http://uvumitools.com/dropdown.html]http://uvumitools.com/dropdown.html



18. jQuery UI Tabs
[/url]
使用jQuery製作的Tab頁.演示地址：[url=http://stilbuero.de/jquery/tabs_3/]http://stilbuero.de/jquery/tabs_3/



19. 右鍵菜單Proto.Menu
使用Prototype 框架製作的右鍵菜單。
[/url]
演示地址：[url=http://kangax.github.com/proto.menu/]http://kangax.github.com/proto.menu/



20. 展開/收起式菜單
一個支持兩層的有點類似於樹形的菜單。
[/url]
演示地址：[url=http://www.456bereastreet.com/archive/200705/accessible_expanding_and_collapsing_menu/]http://www.456bereastreet.com/archive/200705/accessible_expanding_and_collapsing_menu/