賈智

jQuery菜單插件可以讓你的網(wǎng)站訪客獲得最好的動(dòng)態(tài)導(dǎo)航。通過(guò)jQuery，你可以提供與眾不同而深受用戶喜愛(ài)的動(dòng)態(tài)外觀。導(dǎo)航是網(wǎng)頁(yè)設(shè)計(jì)最重要的元素之一，應(yīng)該簡(jiǎn)潔實(shí)用并有創(chuàng)意，以免用戶因搜尋無(wú)果而離開(kāi)。

jQuery是一種輕巧、適用于各種瀏覽器、異常強(qiáng)大的JavaScript框架（程序庫(kù)），它強(qiáng)調(diào)并簡(jiǎn)化了JavaScript、CSS和HTML之間的交互過(guò)程。你可以用jQuery來(lái)改變網(wǎng)站的外觀，讓它脫穎而出，而這個(gè)過(guò)程比你想象的容易。

jQuery是改進(jìn)并突出導(dǎo)航的有力工具。文章中將會(huì)綜合介紹一些新鮮酷炫的jQuery菜單插件，幫助你實(shí)現(xiàn)充滿吸引力的網(wǎng)站導(dǎo)航，讓你網(wǎng)站更有組織性和交互性。另外，也可以看看jQuery的其他特征和插件，比如jQuery圖片縮放插件。

用jQuery和CSS創(chuàng)建Mac風(fēng)格的魚(yú)眼菜單

如果你是一名超級(jí)果粉，你一定會(huì)愛(ài)上這個(gè)CSS魚(yú)眼菜單。這個(gè)菜單可以?？吭陧敳亢偷撞?。

MetroPanel——為現(xiàn)代網(wǎng)站而生的新型導(dǎo)航

MetroPanel分為兩大面板及各種背景與項(xiàng)目，所以你可以用這款插件變換出無(wú)數(shù)種調(diào)整菜單的方法。

Mega Menu Complete Set——大型菜單組

大型下拉菜單組可以通過(guò)使用十多種jQuery效果和13種顏色中的一種來(lái)創(chuàng)建獨(dú)一無(wú)二的jQuery導(dǎo)航菜單。該菜單以自定義網(wǎng)格為基礎(chǔ)，能讓你用標(biāo)題、列表、圖片風(fēng)格、表格、表單元素等多種排版案例將你的內(nèi)容分為多列（1至12列）。

Fullscreen Site Navigation——全屏網(wǎng)站導(dǎo)航

這款JavaScript插件可以讓你簡(jiǎn)單快速地創(chuàng)建全屏網(wǎng)站。它可以整合進(jìn)任何cms（內(nèi)容管理系統(tǒng)）或網(wǎng)站模板：該插件只提供運(yùn)作所需的結(jié)構(gòu)及算法，其他的完全由設(shè)計(jì)師決定。

Metro Flexible Navigation——Metro彈性導(dǎo)航

Metro彈性導(dǎo)航是一種簡(jiǎn)潔的網(wǎng)格布局，與最新的Windows 8界面非常相似。導(dǎo)航可以設(shè)置為水平布局或垂直布局。它可以同時(shí)滾動(dòng)、拉動(dòng)，并有多種實(shí)用的滑動(dòng)控制。可以改變圖標(biāo)，該插件有大量圖標(biāo)可供選擇。

UI-Pro——簡(jiǎn)單的Metro風(fēng)格導(dǎo)航欄

你可以用這款簡(jiǎn)單的jQuery插件輕松地創(chuàng)建Metro（現(xiàn)在被簡(jiǎn)稱為Windows 8 UI）風(fēng)格導(dǎo)航欄。插件包帶有由P. J. Onori創(chuàng)造的“iconic”圖標(biāo)包，你可以用CSS類(lèi)輕松設(shè)置。

Quick & Pro菜單

Quick & Pro菜單可以創(chuàng)建特別的jQuery大型菜單，這種菜單在網(wǎng)站中很少見(jiàn)，不過(guò)便于讓訪客快速獲取大量信息。

Tabs + Accordion——可折疊標(biāo)簽插件

這款jQuery插件降低了創(chuàng)建響應(yīng)式可折疊標(biāo)簽的難度。你可以用內(nèi)置主題，也可以自己選擇顏色來(lái)創(chuàng)建屬于你的主題。

SuperfishjQuery菜單插件

Superfish是一款專門(mén)針對(duì)菜單的jQuery插件。它可以對(duì)HTML和CSS所實(shí)現(xiàn)的效果加以改進(jìn)，還能懸停支持IE6、動(dòng)畫(huà)、鍵盤(pán)可用性等。

Smooth Expandable Menu——平滑擴(kuò)展菜單

平滑擴(kuò)展菜單是創(chuàng)建最少垂直擴(kuò)展菜單的權(quán)威工具，可以直接從HTML文件或腳本命令通過(guò)其內(nèi)置的17項(xiàng)配置參數(shù)來(lái)輕松實(shí)現(xiàn)自定義。插件包有3種樣本（Serif、San Serif及Tiny），可以降低整合進(jìn)任何網(wǎng)頁(yè)專題的難度。

Menu Maker——CSS3 jQuery菜單生成器

該javaScript代碼可以讓你的導(dǎo)航菜單欄在友好的環(huán)境中生成配有邊角圓滑且動(dòng)畫(huà)流暢的搜索框。生成導(dǎo)航菜單從未如此簡(jiǎn)單。你只需拉動(dòng)滾動(dòng)條來(lái)改變菜單屬性。

jQuery Push Menu

這是一款很酷的移動(dòng)大型菜單插件。它可以在導(dǎo)航區(qū)用圖片及文本來(lái)突出關(guān)鍵產(chǎn)品。在大型菜單中插入視頻、圖片、表格等也很簡(jiǎn)單。

QuickAccess Menu——快速菜單訪問(wèn)

自定義與整合都十分方便，并可以快速訪問(wèn)你的網(wǎng)站。代碼十分靈活，可以讓產(chǎn)品充分發(fā)揮其響應(yīng)功能。這款小設(shè)計(jì)可以融洽和諧地配合你的網(wǎng)站。

Sticklr——jQuery固定側(cè)邊面板插件

這款實(shí)用的固定側(cè)邊面板受到了Envato站點(diǎn)切換工具的啟發(fā)，是通過(guò)CSS制作的，之后jQuery對(duì)其做出了巨大的改進(jìn)。

Puffer Fish式導(dǎo)航工具

Puffer Fish可以讓網(wǎng)站的導(dǎo)航欄實(shí)現(xiàn)獨(dú)特的圖片預(yù)覽效果，包括抽出式、彈出式等等。

Tree——jQuery樹(shù)型插件

這款jQuery插件安裝簡(jiǎn)便，所含選項(xiàng)十分豐富。該插件可以將你的HTML轉(zhuǎn)化成含有無(wú)數(shù)菜單及子菜單的可折疊菜單系統(tǒng)。適合所有主流瀏覽器。

Sherpa——完備的導(dǎo)航系統(tǒng)

Sherpa能夠完全滿足你的所有導(dǎo)航要求。這一個(gè)插件集合了界面三大導(dǎo)航元素：導(dǎo)航欄、側(cè)邊欄和固定頁(yè)腳。

Slide Down Menu——向下滑動(dòng)菜單

這款插件是幫助網(wǎng)站在縮略圖彈出的同時(shí)滑出菜單選項(xiàng)框，并且給出了菜單選項(xiàng)，以及設(shè)置了子菜單框來(lái)添加鏈接。當(dāng)用戶懸停在某一個(gè)菜單選項(xiàng)上，子菜單就會(huì)相應(yīng)地向左滑或者向右滑。

Memu——簡(jiǎn)單的jQuery菜單

這是一款小而方便可靠的jQuery插件，即使不在jQuery的環(huán)境下也可以使用該菜單。該腳本的特殊之處在于它內(nèi)含plugin jstorage.js，而且這是一款極具實(shí)用性的插件，可存儲(chǔ)現(xiàn)有項(xiàng)目。所以，如果你正在進(jìn)行導(dǎo)航，選中的選項(xiàng)就會(huì)保持高亮狀態(tài)。你就可以少用一些服務(wù)器代碼。

jQuery圖文菜單

jQuery圖文菜單有多種配置選項(xiàng)，能給你的網(wǎng)站提供美觀的可配置動(dòng)畫(huà)菜單。該菜單完全兼用W3C，在iPhone及iPad等移動(dòng)設(shè)備上表現(xiàn)良好。

Ninja UI

Ninja用戶界面在JavaScript及CSS技術(shù)方面十分成熟，在應(yīng)要求發(fā)動(dòng)網(wǎng)頁(yè)忍術(shù)之前一直默默潛伏著。

Image Hover Move

一款簡(jiǎn)單實(shí)用的圖片導(dǎo)航插件，為你的導(dǎo)航欄提供特色豐富的jQuery圖片插件。

jQuery One Page導(dǎo)航插件

有了這款插件，用戶點(diǎn)擊導(dǎo)航后頁(yè)面可以平滑滾動(dòng)。它還可以根據(jù)滾動(dòng)的目標(biāo)區(qū)域自動(dòng)突出正確的導(dǎo)航區(qū)域。

Sticky Footer——固定頁(yè)腳

這款固定頁(yè)腳可以隨時(shí)可用于你的網(wǎng)站中。你可以創(chuàng)建自己的菜單，用1至12列來(lái)展示你的內(nèi)容。它有兩種變體：一種寬度固定，能與你的布局相配，另一種為全寬，占據(jù)整個(gè)視圖寬度。

Droop

Dropp是一種用其他菜單（你可以自己設(shè)計(jì)）來(lái)取代常規(guī)下拉菜單（選擇元素）的jQuery插件。

jMenu

我們可以用jMenu這款jQuery插件來(lái)創(chuàng)建帶有無(wú)限子菜單的水平導(dǎo)航。除了jQuery，它還需要jQquery UI，并能支持該程序庫(kù)的所有效果。菜單使用了嵌套列表，因而其標(biāo)記十分簡(jiǎn)潔。

skinableTabs

作為一款jQuery插件，skinableTabs的功能并不像其它的插件那樣豐富，但是它的功能又必不可少，能為你的網(wǎng)站內(nèi)容加入絢麗的標(biāo)簽。使用skinableTabs時(shí)，你可以選擇多種位置、皮膚及過(guò)渡效果。你可以在專屬CSS文件中自定義任何皮膚的外觀。

地鐵線路圖可視化jQuery插件

這款插件可以把雜亂無(wú)序的列表轉(zhuǎn)化成地鐵線路圖，風(fēng)格與倫敦地鐵線路圖相似。它注重用曲線表現(xiàn)出簡(jiǎn)潔美，并合理安排站點(diǎn)及換乘點(diǎn)的標(biāo)記。

mb.verticalSlider

這款插件可以讓你對(duì)較長(zhǎng)的元素列表進(jìn)行分頁(yè)管理，可以配合你頁(yè)面DOM中的已有元素，也可以在需要時(shí)通過(guò)ajax加載元素。它可以通過(guò)鼠標(biāo)滑輪進(jìn)行操作。

jCrumb

jCrumb這款jQuery插件可以立即將面包屑導(dǎo)航添加到任何網(wǎng)頁(yè)里，而無(wú)需擔(dān)心網(wǎng)站地圖或服務(wù)器語(yǔ)言的問(wèn)題。

jQueryStepy——向?qū)Р寮?/p>

jQueryStepy是一款以FormToWizard為基礎(chǔ)的插件，能生成自定義向?qū)А?/p>

使用jQuery的可折疊菜單

這款插件提供了兩種選擇：菜單可以設(shè)計(jì)成點(diǎn)擊切換或直接滾動(dòng)。

jQuery環(huán)境菜單

ContextMenu是一款輕巧的jQuery插件，可以讓你自定義右鍵菜單，然后選擇性地覆蓋瀏覽器的右鍵菜單。

Autobrowse Endless Scroller——無(wú)限滾動(dòng)自動(dòng)瀏覽

這款插件在DOM元素上運(yùn)行后，如果用戶滾動(dòng)到元素底部，插件就會(huì)自動(dòng)擴(kuò)充元素內(nèi)容。插件通過(guò)ajax加載內(nèi)容，用本地存儲(chǔ)來(lái)內(nèi)置緩存。