菜單導(dǎo)航對(duì)于一個(gè)網(wǎng)站來(lái)說(shuō)非常重要，對(duì)于瀏覽者來(lái)說(shuō)，導(dǎo)航設(shè)計(jì)的好壞將直接影響用戶的體驗(yàn)。這里，我們?yōu)榫W(wǎng)頁(yè)開發(fā)者提供了一系列簡(jiǎn)單但是實(shí)用的導(dǎo)航菜單例子及其源碼，僅供參考和學(xué)習(xí)。

CSS3相關(guān)的導(dǎo)航

1、CSS3水平導(dǎo)航和垂直導(dǎo)航

這是一款灰色風(fēng)格的導(dǎo)航，具有水平和垂直的形式，這個(gè)導(dǎo)航是由CSS3實(shí)現(xiàn)的，所以需要用支持CSS3的瀏覽器來(lái)查看。你可以通過(guò)自己修改CSS代碼輕松實(shí)現(xiàn)漂亮的水平導(dǎo)航和垂直導(dǎo)航。

2、銀白色的CSS3導(dǎo)航菜單

這是一款純CSS3制作的導(dǎo)航菜單，這個(gè)銀白色的菜單在朦朧夜空的襯托下顯得格外亮麗。當(dāng)鼠標(biāo)滑過(guò)導(dǎo)航時(shí)，每個(gè)菜單項(xiàng)又會(huì)呈現(xiàn)不同的效果，整體上，這款CSS3導(dǎo)航菜單非常簡(jiǎn)單而又具有立體感。

3、jQuery+CSS3圖片特效導(dǎo)航菜單jSlickmenu

jSlickmenu是一款基于jQuery和CSS3的導(dǎo)航菜單，該菜單的特點(diǎn)是利用旋轉(zhuǎn)和帶陰影的圖片作為導(dǎo)航項(xiàng)，當(dāng)鼠標(biāo)移到導(dǎo)航時(shí)，相應(yīng)的圖片高亮顯示。這款圖片導(dǎo)航由于利用了CSS3特性，所以外觀非常cool。

4、CSS3仿Windows 7的開始菜單

這是一款用純CSS3實(shí)現(xiàn)的仿Win 7的開始菜單。如果我們分解這個(gè)Windows 7開始菜單，我們會(huì)得到1個(gè)div，2個(gè)ul列表，1組鏈接以及一些icon小圖標(biāo)，我們可以一起來(lái)看看具體的效果。

普通JS和CSS導(dǎo)航

5、jQuery仿蘋果導(dǎo)航菜單

這是一款用jQuery實(shí)現(xiàn)的仿蘋果的導(dǎo)航菜單，該導(dǎo)航菜單隨著鼠標(biāo)的滑過(guò)呈現(xiàn)出圖標(biāo)縮放的效果，就像蘋果系統(tǒng)中的Dock Menu一樣。

6、仿豬八戒導(dǎo)航菜單

這是國(guó)內(nèi)最大威客網(wǎng)站豬八戒網(wǎng)在2010年前的網(wǎng)站主導(dǎo)航，該導(dǎo)航主要由CSS和圖片制作完成，導(dǎo)航以藍(lán)色為主色，橘黃色Tab為輔色，整體簡(jiǎn)潔大方。

7、jQuery下拉垂直導(dǎo)航菜單

這是一款基于jQuery的下拉垂直導(dǎo)航菜單，該垂直導(dǎo)航菜單可以展開和收縮每個(gè)菜單項(xiàng)，并在展開和收縮菜單的同時(shí)帶有奇妙的彈性效果。由于這個(gè)垂直導(dǎo)航菜單是完全基于jQuery的，所以可以兼容所有的瀏覽器。

8、仿支付寶的導(dǎo)航菜單

這是一款仿支付寶的產(chǎn)品推廣導(dǎo)航，支持兩屏切換，非常適合給產(chǎn)品宣傳類網(wǎng)站作導(dǎo)航。因?yàn)檫@個(gè)導(dǎo)航是以圖標(biāo)結(jié)合文字的，所以非常直觀并且十分精美，導(dǎo)航最大的目的是讓用戶更好的在站內(nèi)暢行，這個(gè)導(dǎo)航就非常好的滿足了這一點(diǎn)。

9、6種色彩的jQuery+CSS多級(jí)導(dǎo)航菜單

向大家介紹一款基于jQuery和CSS的漂亮導(dǎo)航，該jQuery導(dǎo)航共有6種顏色皮膚。鼠標(biāo)滑過(guò)導(dǎo)航時(shí)，導(dǎo)航邊緣發(fā)出光亮，并有動(dòng)畫效果。而且該導(dǎo)航還有多級(jí)菜單的功能。

10、jQuery菜單導(dǎo)航ddsmoothmenu

ddsmoothmenu是一款基于jQuery的多級(jí)菜單導(dǎo)航插件，你可以任意指定多級(jí)菜單項(xiàng)。同時(shí)，ddsmoothmenu還支持水平菜單和垂直菜單的功能。菜單帶有陰影效果，簡(jiǎn)單而漂亮。ddsmoothmenu全稱Smooth Navigational Menu。

11、jQuery右鍵菜單插件jQuery ContextMenu

jQuery ContextMenu是一款功能強(qiáng)大的網(wǎng)頁(yè)右鍵菜單插件，該插件將幫你非常方便地創(chuàng)建右鍵菜單。你可以指定右擊的位置，同時(shí)菜單中還可以定單選框和多選框的復(fù)合控件，定制非常靈活。

12、jQuery動(dòng)畫菜單jStackmenu

jStackmenu是一款基于jQuery的堆棧式動(dòng)畫菜單，當(dāng)你用鼠標(biāo)點(diǎn)擊那個(gè)“愛心”按鈕時(shí)，jStackmenu菜單就會(huì)以堆棧方式彈出或者收攏，并呈現(xiàn)出流暢的動(dòng)畫特效。

更多網(wǎng)頁(yè)特效，請(qǐng)關(guān)注網(wǎng)頁(yè)特效大全