菜單導(dǎo)航對于一個(gè)網(wǎng)站來說非常重要，對于瀏覽者來說，導(dǎo)航設(shè)計(jì)的好壞將直接影響用戶的體驗(yàn)。這里，我們?yōu)榫W(wǎng)頁開發(fā)者提供了一系列簡單但是實(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的瀏覽器來查看。你可以通過自己修改CSS代碼輕松實(shí)現(xiàn)漂亮的水平導(dǎo)航和垂直導(dǎo)航。
2、銀白色的CSS3導(dǎo)航菜單
這是一款純CSS3制作的導(dǎo)航菜單，這個(gè)銀白色的菜單在朦朧夜空的襯托下顯得格外亮麗。當(dāng)鼠標(biāo)滑過導(dǎo)航時(shí)，每個(gè)菜單項(xiàng)又會呈現(xiàn)不同的效果，整體上，這款CSS3導(dǎo)航菜單非常簡單而又具有立體感。
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開始菜單，我們會得到1個(gè)div，2個(gè)ul列表，1組鏈接以及一些icon小圖標(biāo)，我們可以一起來看看具體的效果。
普通JS和CSS導(dǎo)航
5、jQuery仿蘋果導(dǎo)航菜單
這是一款用jQuery實(shí)現(xiàn)的仿蘋果的導(dǎo)航菜單，該導(dǎo)航菜單隨著鼠標(biāo)的滑過呈現(xiàn)出圖標(biāo)縮放的效果，就像蘋果系統(tǒng)中的Dock Menu一樣。
6、仿豬八戒導(dǎo)航菜單
這是國內(nèi)最大威客網(wǎng)站豬八戒網(wǎng)在2010年前的網(wǎng)站主導(dǎo)航，該導(dǎo)航主要由CSS和圖片制作完成，導(dǎo)航以藍(lán)色為主色，橘黃色Tab為輔色，整體簡潔大方。
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多級導(dǎo)航菜單
向大家介紹一款基于jQuery和CSS的漂亮導(dǎo)航，該jQuery導(dǎo)航共有6種顏色皮膚。鼠標(biāo)滑過導(dǎo)航時(shí)，導(dǎo)航邊緣發(fā)出光亮，并有動畫效果。而且該導(dǎo)航還有多級菜單的功能。
10、jQuery菜單導(dǎo)航ddsmoothmenu
ddsmoothmenu是一款基于jQuery的多級菜單導(dǎo)航插件，你可以任意指定多級菜單項(xiàng)。同時(shí)，ddsmoothmenu還支持水平菜單和垂直菜單的功能。菜單帶有陰影效果，簡單而漂亮。ddsmoothmenu全稱Smooth Navigational Menu。
11、jQuery右鍵菜單插件jQuery ContextMenu
jQuery ContextMenu是一款功能強(qiáng)大的網(wǎng)頁右鍵菜單插件，該插件將幫你非常方便地創(chuàng)建右鍵菜單。你可以指定右擊的位置，同時(shí)菜單中還可以定單選框和多選框的復(fù)合控件，定制非常靈活。
12、jQuery動畫菜單jStackmenu
jStackmenu是一款基于jQuery的堆棧式動畫菜單，當(dāng)你用鼠標(biāo)點(diǎn)擊那個(gè)“愛心”按鈕時(shí)，jStackmenu菜單就會以堆棧方式彈出或者收攏，并呈現(xiàn)出流暢的動畫特效。
更多網(wǎng)頁特效，請關(guān)注網(wǎng)頁特效大全
