分享簡單而實用的網(wǎng)頁菜單導(dǎo)航
菜單導(dǎo)航對于一個網(wǎng)站來說非常重要，對于瀏覽者來說，導(dǎo)航設(shè)計的好壞將直接影響用戶的體驗。這里，我們?yōu)榫W(wǎng)頁開發(fā)者提供了一系列簡單但是實用的導(dǎo)航菜單例子及其源碼，僅供參考和學(xué)習(xí)。
CSS3相關(guān)的導(dǎo)航
這是一款灰色風(fēng)格的導(dǎo)航，具有水平和垂直的形式，這個導(dǎo)航是由CSS3實現(xiàn)的，所以需要用支持CSS3的瀏覽器來查看。你可以通過自己修改CSS代碼輕松實現(xiàn)漂亮的水平導(dǎo)航和垂直導(dǎo)航。
這是一款純CSS3制作的導(dǎo)航菜單，這個銀白色的菜單在朦朧夜空的襯托下顯得格外亮麗。當(dāng)鼠標(biāo)滑過導(dǎo)航時，每個菜單項又會呈現(xiàn)不同的效果，整體上，這款CSS3導(dǎo)航菜單非常簡單而又具有立體感。
3、jQuery+CSS3圖片特效導(dǎo)航菜單jSlickmenu
jSlickmenu是一款基于jQuery和CSS3的導(dǎo)航菜單，該菜單的特點是利用旋轉(zhuǎn)和帶陰影的圖片作為導(dǎo)航項，當(dāng)鼠標(biāo)移到導(dǎo)航時，相應(yīng)的圖片高亮顯示。這款圖片導(dǎo)航由于利用了CSS3特性，所以外觀非常cool。
這是一款用純CSS3實現(xiàn)的仿Win 7的開始菜單。如果我們分解這個Windows 7開始菜單，我們會得到1個div，2個ul列表，1組鏈接以及一些icon小圖標(biāo)，我們可以一起來看看具體的效果。
普通JS和CSS導(dǎo)航
這是一款用jQuery實現(xiàn)的仿蘋果的導(dǎo)航菜單，該導(dǎo)航菜單隨著鼠標(biāo)的滑過呈現(xiàn)出圖標(biāo)縮放的效果，就像蘋果系統(tǒng)中的Dock Menu一樣。
這是國內(nèi)最大威客網(wǎng)站豬八戒網(wǎng)在2010年前的網(wǎng)站主導(dǎo)航，該導(dǎo)航主要由CSS和圖片制作完成，導(dǎo)航以藍色為主色，橘黃色Tab為輔色，整體簡潔大方。
這是一款基于jQuery的下拉垂直導(dǎo)航菜單，該垂直導(dǎo)航菜單可以展開和收縮每個菜單項，并在展開和收縮菜單的同時帶有奇妙的彈性效果。由于這個垂直導(dǎo)航菜單是完全基于jQuery的，所以可以兼容所有的瀏覽器。
這是一款仿支付寶的產(chǎn)品推廣導(dǎo)航，支持兩屏切換，非常適合給產(chǎn)品宣傳類網(wǎng)站作導(dǎo)航。因為這個導(dǎo)航是以圖標(biāo)結(jié)合文字的，所以非常直觀并且十分精美，導(dǎo)航最大的目的是讓用戶更好的在站內(nèi)暢行，這個導(dǎo)航就非常好的滿足了這一點。
向大家介紹一款基于jQuery和CSS的漂亮導(dǎo)航，該jQuery導(dǎo)航共有6種顏色皮膚。鼠標(biāo)滑過導(dǎo)航時，導(dǎo)航邊緣發(fā)出光亮，并有動畫效果。而且該導(dǎo)航還有多級菜單的功能。
10、jQuery菜單導(dǎo)航ddsmoothmenu
ddsmoothmenu是一款基于jQuery的多級菜單導(dǎo)航插件，你可以任意指定多級菜單項。同時，ddsmoothmenu還支持水平菜單和垂直菜單的功能。菜單帶有陰影效果，簡單而漂亮。ddsmoothmenu全稱Smooth Navigational Menu。
11、jQuery右鍵菜單插件jQuery ContextMenu
jQuery ContextMenu是一款功能強大的網(wǎng)頁右鍵菜單插件，該插件將幫你非常方便地創(chuàng)建右鍵菜單。你可以指定右擊的位置，同時菜單中還可以定單選框和多選框的復(fù)合控件，定制非常靈活。
jStackmenu是一款基于jQuery的堆棧式動畫菜單，當(dāng)你用鼠標(biāo)點擊那個“愛心”按鈕時，jStackmenu菜單就會以堆棧方式彈出或者收攏，并呈現(xiàn)出流暢的動畫特效。
原文鏈接：http://www.cnblogs.com/cnhtml5/archive/2012/06/13/2548664.html
【編輯推薦】
