分享簡(jiǎn)單而實(shí)用的網(wǎng)頁菜單導(dǎo)航
菜單導(dǎo)航對(duì)于一個(gè)網(wǎng)站來說非常重要，對(duì)于瀏覽者來說，導(dǎo)航設(shè)計(jì)的好壞將直接影響用戶的體驗(yàn)。這里，我們?yōu)榫W(wǎng)頁開發(fā)者提供了一系列簡(jiǎn)單但是實(shí)用的導(dǎo)航菜單例子及其源碼，僅供參考和學(xué)習(xí)。
CSS3相關(guān)的導(dǎo)航
這是一款灰色風(fēng)格的導(dǎo)航，具有水平和垂直的形式，這個(gè)導(dǎo)航是由CSS3實(shí)現(xiàn)的，所以需要用支持CSS3的瀏覽器來查看。你可以通過自己修改CSS代碼輕松實(shí)現(xiàn)漂亮的水平導(dǎo)航和垂直導(dǎo)航。
這是一款純CSS3制作的導(dǎo)航菜單，這個(gè)銀白色的菜單在朦朧夜空的襯托下顯得格外亮麗。當(dāng)鼠標(biāo)滑過導(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。
這是一款用純CSS3實(shí)現(xiàn)的仿Win 7的開始菜單。如果我們分解這個(gè)Windows 7開始菜單，我們會(huì)得到1個(gè)div，2個(gè)ul列表，1組鏈接以及一些icon小圖標(biāo)，我們可以一起來看看具體的效果。
普通JS和CSS導(dǎo)航
這是一款用jQuery實(shí)現(xiàn)的仿蘋果的導(dǎo)航菜單，該導(dǎo)航菜單隨著鼠標(biāo)的滑過呈現(xiàn)出圖標(biāo)縮放的效果，就像蘋果系統(tǒng)中的Dock Menu一樣。
這是國(guó)內(nèi)最大威客網(wǎng)站豬八戒網(wǎng)在2010年前的網(wǎng)站主導(dǎo)航，該導(dǎo)航主要由CSS和圖片制作完成，導(dǎo)航以藍(lán)色為主色，橘黃色Tab為輔色，整體簡(jiǎn)潔大方。
這是一款基于jQuery的下拉垂直導(dǎo)航菜單，該垂直導(dǎo)航菜單可以展開和收縮每個(gè)菜單項(xiàng)，并在展開和收縮菜單的同時(shí)帶有奇妙的彈性效果。由于這個(gè)垂直導(dǎo)航菜單是完全基于jQuery的，所以可以兼容所有的瀏覽器。
這是一款仿支付寶的產(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)滑過導(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)頁右鍵菜單插件，該插件將幫你非常方便地創(chuàng)建右鍵菜單。你可以指定右擊的位置，同時(shí)菜單中還可以定單選框和多選框的復(fù)合控件，定制非常靈活。
jStackmenu是一款基于jQuery的堆棧式動(dòng)畫菜單，當(dāng)你用鼠標(biāo)點(diǎn)擊那個(gè)“愛心”按鈕時(shí)，jStackmenu菜單就會(huì)以堆棧方式彈出或者收攏，并呈現(xiàn)出流暢的動(dòng)畫特效。
原文鏈接：http://www.cnblogs.com/cnhtml5/archive/2012/06/13/2548664.html
【編輯推薦】
