（轉）分享20個漂亮強大的jQuery導航選單

【IT168 技術】在網頁中，選單導航要的功能是十分重要的，它能告訴你要尋找資訊的準確位置。在jQuery中，有眾多的優秀的指令碼可以幫助你去實現某一方面的功能，但在導航選單方面，數量雖然也不少，但優秀的導航選單卻不是很多。本文將選取了20個漂亮強大的使用jQuery選單的外掛或教程，並給出了下載或學習的地址，其中必定有你所喜歡的。

　　1 漂亮的滑動彈出效果

　　這是一款漂亮的向右滑動彈出的效果，其執行效果地址在：http://tympanus.net/Tutorials/FixedNavigationTutorial/，如下圖所示：

　　其中的操作方法為當滑鼠點隱藏的選單時，其選單會自動向右彈出，當滑鼠移動到另外一個選單項時，原來的選單項會自動消失，效果非常好。而這個選單的教程為：http://tympanus.net/codrops/2009/11/30/beautiful-slide-out-navigation-a-css-and-jquery-tutorial/?1292927202

　　2 帶搜尋框和下拉框的導航選單

　　這個導航選單的效果在http://tympanus.net/Tutorials/UIElements/SearchBox/可以看到，當使用者在輸入框中滑鼠點選時，會彈出下拉框，其中有很多個核取方塊，使用者可以選擇這些核取方塊進行選擇，然後再提交到後臺進行處理。這個選單的程式碼下載在http://tympanus.net/codrops/2010/07/14/ui-elements-search-box/可以下載到。

　　3 jQuery MegaMenu2

　　jQuery MegaMenu2(http://www.geektantra.com/2010/05/jquery-megamenu-2/)是一個功能十分強大的下拉導航選單，這個選單的特點是，每個下拉選單的樣式都可以定製，如上圖所示。

　　4 Cut And Paste jQuery 選單

　　這個選單的特點是，只要你設定好了一個錨點(比如在按鈕或者連結上)，就可以設定多列的導航選單，如上圖。在上面的圖中點某個按鈕，就會彈出如下的導航選單。這個選單的程式碼可以在http://www.javascriptkit.com/script/script2/jkmegamenu.shtml中下載。

　　5 大型的下拉導航選單

　　這個叫Mega Drop Down Menus的jQuery下拉導航選單的效果，特別適用於比較大型的電子商務站中的多級選單導航，可以在http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/中 學習到如何編寫。

　　6 簡潔冷色調的一款jQuery導航選單

　　研究表明，使用者進入網頁的第一眼，往往就會被導航選單所注意到。現在很多導航選單都搞的很花俏，如果你不喜歡花俏的話，可以嘗試根據下面這個教程去學習，去學習做一個如上圖的導航選單，其風格是簡單而顯得冷色調。教程在http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html可以看到。

　　7 Superfish導航選單

　　Superfish導航選單(http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started)的特點在於簡單，而且提供了多種樣式可供選擇，支援IE6及各類主流瀏覽器。

　　8 jQuery配合動畫效果的導航選單

　　在這個教程中(http://www.shopdev.co.uk/blog/animated-menus-using-jquery/)，將會學習到如何使用css,javascript和xhtml去簡單打造一個有動畫效果的導航選單。

　　9 使用CSS和jQuery設計的一個特別的導航選單

　　這個導航選單的效果很特別，當點每個按鈕時，按鈕時從上向下滑動出現的。效果在這http://d2o0t5hpnwv4c1.cloudfront.net/009_jQueryMenu/sm/result/index.html，其中特別推薦這個教程在http://net.tutsplus.com/tutorials/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/

　　10 非常小巧的jQuery導航選單

　　這個選單的效果及教程在http://javascript-array.com/scripts/jquery_simple_drop_down_menu/中可以看到，它的檔案體積很小，而且程式碼不多，程式碼就20多行，使用十分方便，而且相容IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+等各類瀏覽器。

　　11 簡單的jQuery下拉導航

　　這個導航選單的效果如上圖，執行效果和教程在http://css-tricks.com/simple-jquery-dropdowns/，其中的特點在於作者認為要利用它只需要修改最小的樣式，而且體積小，能相容各類瀏覽器。

　　12 多方向的下拉導航選單

　　這個選單的效果在http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm#ajax可以看到，其特點之一是使用了CSS3和能支援ajax，而且選單效果可以設定橫向導航時選單下拉，以及豎嚮導航時，選單向右彈出。

　　13 jQuery Multi Level CSS Menu

　　之所以要推薦這個選單，不是因為它的效果有多眩目，而是因為它的過於簡潔，就1個CSS檔案和一個js檔案和jquery檔案而已，很適合初學者學習。說明在：http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_horizontal_blue/

　　14 一個優秀的多層導航選單

　　地址在：http://woork.blogspot.com/2009/09/how-to-implement-perfect-multi-level.html，但有個遺憾地方，不能派在IE8上

　　15 無限制級數的垂直下拉導航選單

　　地址在：http://www.htmldrive.net/items/show/57/Simple-unlimited-levels-vertical-drop-down-navigation-menu-jquery-plugin.html

　　16 jdMenu

　　jdMenu(http://jdsharp.us/jQuery/plugins/jdMenu/)提供了一個小巧，簡潔的橫向下拉導航選單，還支援ajax和鍵盤呢。

　　17 跳躍式效果的導航選單

　　這個效果在http://demo.tutorialzine.com/2009/09/stylish-navigation-menu-jquery/ 上，其中的一個特色是點每個按鈕時，會有上下跳躍的效果。教程在：http://tutorialzine.com/2009/09/stylish-navigation-menu-jquery/

　　18 iPad風格的導航選單

　　這是一個象ipad風格的導航選單。(http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu/)，特別適用在層次比較多和複雜的選單導航中，當導航時，能實現有點象ipad裡選單的效果，使使用者可以快速返回上一層。

　　19 字母導航選單

　　這個外掛是以26個英文字母為順序，當使用者點每個英文字母時，會導航到該英文字母，並顯示該字母下的分類內容，同時當滑鼠移動到該字母上時，會在上方顯示一個數字，表明該字母分類下有多少項屬於該字母分類的內容。外掛可以在：http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx中下載到。

　　20 Lava Lamp

　　這是一個色彩豐富，效果很cool的導航外掛，當滑鼠從左邊掃向右邊時，你會發現很cool的效果，外掛在：http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/可以下載。