在后臺或OA系統(tǒng)中最常用到的布局往往是一個全屏布局，一般都是上中下三行兩列布局，頁頭、頁腳、左側(cè)菜單加一個右側(cè)ifame框架頁。所以那種帶折疊的二級菜單是會經(jīng)常使用到的，本例便是實(shí)現(xiàn)這樣一種比較通用的全兼容可高亮二級緩沖折疊菜單。

特點(diǎn)：

全兼容，瀏覽器測試：IE5.5、IE6、IE7、IE8、FF3.0、谷歌、Safari 4.0、Opera9.0。
Html結(jié)構(gòu)優(yōu)雅簡潔，無多余標(biāo)簽，利于程序循環(huán)輸出。
樣式與結(jié)構(gòu)分離，你可以在樣式表中修改不同的風(fēng)格。
當(dāng)前選中項(xiàng)高亮狀態(tài)，一級菜單和二級菜單都可以高亮顯示。
折疊層優(yōu)雅緩沖動畫。
最適用于后臺和一些OA系統(tǒng)界面。

缺點(diǎn)：

不支持防刷新，這個功能在后臺應(yīng)用系統(tǒng)中應(yīng)該用途不大，沒有加入這個功能。
在IE6中緩沖效果沒有出來，對于IE6，就弱化一下效果。
還是先看看效果截圖：

簡單說一下制作這樣的菜單的一些簡單的思路和會遇到的問題。

一般制作一個效果，我的制作流程一般是先畫出HTML結(jié)構(gòu)層內(nèi)容，再寫樣式，之后是搞一些錦上添花的效果，如JS特效等等。不知各位大牛們是怎樣一個流程模式。

結(jié)構(gòu)層：

結(jié)構(gòu)層的構(gòu)思一般是建立在一個感性認(rèn)識上的，一般是有一個效果圖，根據(jù)這個效果圖構(gòu)建最簡潔的HTML結(jié)構(gòu)。如上圖所示，映入眼簾的第一印象，首先是想到用一個UL的無序列表，但是…這是一個二級嵌套的列表，這是我們首先需要考慮的問題。

因此結(jié)構(gòu)應(yīng)該是下面這樣子：


在有二級菜單時是一個嵌套的UL結(jié)構(gòu)，無二級菜單時則是如下：

當(dāng)然，你也可以采用dl-dt-dd有序列表的方式來創(chuàng)建這種嵌套的結(jié)構(gòu)，視你的實(shí)際情況而定。

有了最原始的結(jié)構(gòu)層，你就需要添加一些必要的鉤子，用于CSS和JS控制樣式和效果，我一直反對那種添加很多類名的寫法，這會增加頁面的體積，所以最精簡的作法是應(yīng)用一兩個必要的類名給父容器即可，然后在樣式表中用子（群）選擇符設(shè)置各種個性的設(shè)置。在上面的結(jié)構(gòu)，你會想到用幾個類名來定義所有的樣式呢？

我的做法是只用三個類名即可以控制全部的樣式顯示了。一個是最頂級UL，定義為class=”menu”，一個是二級菜單的容器，也就是嵌套的UL定義一個class=”level2”，最后是一級菜單項(xiàng)li定義一個class=”level1”，有了這三個鉤子，你就可以操縱整個結(jié)構(gòu)的樣式了。

表現(xiàn)層：

樣式表的設(shè)置都很簡單，唯一要注意的是，為了便于JS控制二級菜單的顯隱和記錄當(dāng)前選中項(xiàng)的高亮狀態(tài)，所以我不用hover偽類來實(shí)現(xiàn)鼠標(biāo)的滑入滑出效果，而采用JS來模擬它。用JS控制樣式的關(guān)鍵代碼如下：

一級菜單樣式

二級菜單樣式

行為層：

因?yàn)榍懊嬉呀?jīng)提到，我們在樣式表并沒有定義菜單的三態(tài)效果，所以我們需要給每個菜單項(xiàng)綁定onmouseover、onmouseout和onclick事件模擬出這種效果來。在結(jié)構(gòu)層中我們并沒有定義這個總?cè)萜鞯腎D，而只定義了一個class類名，所以在JS添加了一個擴(kuò)展的getElementsByClassName()方法（感謝好友司徒正美），根據(jù)類名來獲得這個對象。用循環(huán)閉包來綁定這三個事件。

詳細(xì)代碼就不一一解說了，Demo中注釋得非常清楚，請下載到本機(jī)瀏覽。

有什么問題請?jiān)诒静┛椭懈N討論，祝你用得開心！
在線演示地址 http://demo.jb51.net/js/caidan_js/demo.html
打包下載地址 http://www.dhdzp.com/jiaoben/27308.html