|
|
特點(diǎn)：
全兼容，瀏覽器測(cè)試：IE5.5、IE6、IE7、IE8、FF3.0、谷歌、Safari 4.0、Opera9.0。
Html結(jié)構(gòu)優(yōu)雅簡(jiǎn)潔，無(wú)多余標(biāo)簽，利于程序循環(huán)輸出。
樣式與結(jié)構(gòu)分離，你可以在樣式表中修改不同的風(fēng)格。
當(dāng)前選中項(xiàng)高亮狀態(tài)，一級(jí)菜單和二級(jí)菜單都可以高亮顯示。
折疊層優(yōu)雅緩沖動(dòng)畫(huà)。
最適用于后臺(tái)和一些OA系統(tǒng)界面。
缺點(diǎn)：
不支持防刷新，這個(gè)功能在后臺(tái)應(yīng)用系統(tǒng)中應(yīng)該用途不大，沒(méi)有加入這個(gè)功能。
在IE6中緩沖效果沒(méi)有出來(lái)，對(duì)于IE6，就弱化一下效果。
還是先看看效果截圖：
簡(jiǎn)單說(shuō)一下制作這樣的菜單的一些簡(jiǎn)單的思路和會(huì)遇到的問(wèn)題。
一般制作一個(gè)效果，我的制作流程一般是先畫(huà)出HTML結(jié)構(gòu)層內(nèi)容，再寫(xiě)樣式，之后是搞一些錦上添花的效果，如JS特效等等。不知各位大牛們是怎樣一個(gè)流程模式。
結(jié)構(gòu)層：
結(jié)構(gòu)層的構(gòu)思一般是建立在一個(gè)感性認(rèn)識(shí)上的，一般是有一個(gè)效果圖，根據(jù)這個(gè)效果圖構(gòu)建最簡(jiǎn)潔的HTML結(jié)構(gòu)。如上圖所示，映入眼簾的第一印象，首先是想到用一個(gè)UL的無(wú)序列表，但是…這是一個(gè)二級(jí)嵌套的列表，這是我們首先需要考慮的問(wèn)題。
因此結(jié)構(gòu)應(yīng)該是下面這樣子：
復(fù)制代碼 代碼如下:
<li><a href="#none">一級(jí)菜單項(xiàng)</a>
<ul>
<li><a href="#none">二級(jí)菜單項(xiàng)</a></li>
</ul>
</li>
在有二級(jí)菜單時(shí)是一個(gè)嵌套的UL結(jié)構(gòu)，無(wú)二級(jí)菜單時(shí)則是如下：
復(fù)制代碼 代碼如下:
<ul class="menu">
<li><a href="#none">一級(jí)菜單項(xiàng)</a></li>
</ul>
當(dāng)然，你也可以采用dl-dt-dd有序列表的方式來(lái)創(chuàng)建這種嵌套的結(jié)構(gòu)，視你的實(shí)際情況而定。
有了最原始的結(jié)構(gòu)層，你就需要添加一些必要的鉤子，用于CSS和JS控制樣式和效果，我一直反對(duì)那種添加很多類名的寫(xiě)法，這會(huì)增加頁(yè)面的體積，所以最精簡(jiǎn)的作法是應(yīng)用一兩個(gè)必要的類名給父容器即可，然后在樣式表中用子（群）選擇符設(shè)置各種個(gè)性的設(shè)置。在上面的結(jié)構(gòu)，你會(huì)想到用幾個(gè)類名來(lái)定義所有的樣式呢？
我的做法是只用三個(gè)類名即可以控制全部的樣式顯示了。一個(gè)是最頂級(jí)UL，定義為class=”menu”，一個(gè)是二級(jí)菜單的容器，也就是嵌套的UL定義一個(gè)class=”level2”，最后是一級(jí)菜單項(xiàng)li定義一個(gè)class=”level1”，有了這三個(gè)鉤子，你就可以操縱整個(gè)結(jié)構(gòu)的樣式了。
表現(xiàn)層：
樣式表的設(shè)置都很簡(jiǎn)單，唯一要注意的是，為了便于JS控制二級(jí)菜單的顯隱和記錄當(dāng)前選中項(xiàng)的高亮狀態(tài)，所以我不用hover偽類來(lái)實(shí)現(xiàn)鼠標(biāo)的滑入滑出效果，而采用JS來(lái)模擬它。用JS控制樣式的關(guān)鍵代碼如下：
一級(jí)菜單樣式
復(fù)制代碼 代碼如下:
/*一級(jí)菜單三態(tài)樣式,供JS調(diào)用*/
.menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;background:url(../images/menubg.gif) no-repeat left top;}
.menu li.level1 a.hove{background-position:left -31px;}
.menu li.level1 a.cur{background-position:left -62px;}
二級(jí)菜單樣式
復(fù)制代碼 代碼如下:
/*二級(jí)菜單三態(tài)樣式,供JS調(diào)用*/
.menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;background:url(../images/menubg.gif) no-repeat left top;}
.menu li.level1 a.hove{background-position:left -31px;}
.menu li.level1 a.cur{background-position:left -62px;}
行為層：
因?yàn)榍懊嬉呀?jīng)提到，我們?cè)跇邮奖聿](méi)有定義菜單的三態(tài)效果，所以我們需要給每個(gè)菜單項(xiàng)綁定onmouseover、onmouseout和onclick事件模擬出這種效果來(lái)。在結(jié)構(gòu)層中我們并沒(méi)有定義這個(gè)總?cè)萜鞯腎D，而只定義了一個(gè)class類名，所以在JS添加了一個(gè)擴(kuò)展的getElementsByClassName()方法（感謝好友司徒正美），根據(jù)類名來(lái)獲得這個(gè)對(duì)象。用循環(huán)閉包來(lái)綁定這三個(gè)事件。
詳細(xì)代碼就不一一解說(shuō)了，Demo中注釋得非常清楚，請(qǐng)下載到本機(jī)瀏覽。
有什么問(wèn)題請(qǐng)?jiān)诒静┛椭懈N討論，祝你用得開(kāi)心！
在線演示地址 http://demo.jb51.NET/js/caidan_js/demo.html
打包下載地址 http://www.jb51.NET/jiaoben/27308.html
JavaScript技術(shù)：js 全兼容可高亮二級(jí)緩沖折疊菜單，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
