建站
咨詢
售后
建站咨詢
新聞中心
因為Javascript可以處理和用戶的交互，所以使用Javascript會有更好的用戶體驗。在這篇文章里，你可以看到一些令人恐怖和***的Javascript制作的導(dǎo)航條。（相關(guān)閱讀：***HTML導(dǎo)航條***實踐）
1. MenuMatic
這個示例主要是展示了一個排序的縱向或橫向的下拉式菜單導(dǎo)航條。
演示地址：http://greengeckodesign.com/menumatic
2. jQuery制作的動畫按鈕菜單
當(dāng)鼠標(biāo)經(jīng)過的時候，按鈕會有下壓的感覺。
演示地址：http://www.shopdev.co.uk/blog/animated-menus-using-jquery/
3. jQuery卷簾門特效導(dǎo)航條
Gaya Kessler 設(shè)計了這樣一種卷簾門式導(dǎo)航條，相當(dāng)?shù)目帷?/p>
演示地址：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設(shè)計這個下拉式滑動式菜單。
演示地址：http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/
#p#
6. Perspective Tabs
這個技術(shù)很酷了，有點類似于iPhone，通過鼠標(biāo)可以滾動導(dǎo)航條。
演示地址：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
當(dāng)鼠標(biāo)經(jīng)過的時候，菜單項上會有一個小陰影尾隨著。以前，這樣的技術(shù)基本上通過Flash完成的。
演示地址：http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
9. 魚眼菜單
鼠標(biāo)經(jīng)過的時候，圖標(biāo)會變得大起來。這個技術(shù)相當(dāng)不錯。
演示地址：http://marcgrabanski.com/articles/fisheye-javascript-menu
10. 簡單的JavaScript折疊式菜單
相當(dāng)不錯的一相折疊式菜單。
演示地址：http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/
#p#
11. 高亮滑動式菜單
這個特效和第8個很類似。
演示地址：http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/
12. 高亮式菜單
鼠標(biāo)經(jīng)過的時候，菜單項會高亮起來。而沒有鼠標(biāo)的經(jīng)過的時候，其是暗淡的。
演示地址：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制作的一個“魚眼”式的導(dǎo)航條。
演示地址：http://www.chromasynthetic.com/blog/
#p#
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/
【編輯推薦】
- ***HTML導(dǎo)航條***實踐
- 深入剖析CSS導(dǎo)航菜單的四大優(yōu)點
- 25個下拉菜單導(dǎo)航腳本下載
網(wǎng)頁標(biāo)題：20個令人恐怖的JavaScript導(dǎo)航技術(shù)
本文地址：http://m.5511xx.com/article/dpgogpd.html
