最近一段時間一直比較忙，已經好幾個月沒有打理部落格了。現將一個最近在專案中製作的一個選單實例整理出來，分享一下。
在後台或OA系統中最常使用到的佈局往往是一個全螢幕佈局，一般都是上中下三行兩列佈局，頁頭、頁腳、左側選單加一個右側ifame框架頁。所以那種帶有折疊的二級菜單是會經常使用到的，本例便是實現這樣一種比較通用的全兼容可高亮二級緩衝折疊菜單。
特點：
缺點：
簡單說一下製作這樣的菜單的一些簡單的思路和會遇到的問題。
一般製作一個效果，我的製作流程一般是先畫出HTML結構層內容，再寫樣式，之後是搞一些錦上添花的效果，如JS特效等等。不知各位大牛們是怎樣一個流程模式。
結構層：
結構層的構思一般是建立在一個感性認識上的，一般是有一個效果圖，根據這個效果圖建構最簡潔的HTML結構。如上圖所示，映入眼簾的第一印象，首先是想到用一個UL的無序列表，但是…這是一個二級嵌套的列表，這是我們首先需要考慮的問題。
因此結構應該是下面這樣子：
在有二級選單時是一個嵌套的UL結構，無二級選單時則是如下：
<ul class="menu">
<li><a href="#none">一級選單項目</a></li>
</ul>
當然，你也可以採用dl-dt-dd有序列表的方式來創建這種嵌套的結構，視你的實際情況而定。
有了最原始的結構層，你需要添加一些必要的鉤子，用於CSS和JS控制樣式和效果，我一直反對那種添加很多類名的寫法，這會增加頁面的體積，所以最精簡的作法是應用一兩個必要的類別名稱給父容器即可，然後在樣式表中用子（群）選擇符設定各種個性的設定。在上面的結構，你會想到用幾個類別名稱來定義所有的樣式呢？
我的做法是只用三個類別名稱即可以控制全部的樣式顯示了。一個是最頂級UL，定義為class=”menu”，一個是二級選單的容器，也就是嵌套的UL定義一個class=”level2”，最後是一級選單項目li定義一個class=”level1” ，有了這三個鉤子，你就可以操縱整個結構的樣式了。
表現層：
樣式表的設定都很簡單，唯一要注意的是，為了方便JS控制二級選單的顯隱和記錄目前選取項目的高亮狀態，所以我不用hover偽類來實現滑鼠的滑入滑出效果，而採用JS來模擬它。用JS控制樣式的關鍵程式碼如下：
一級菜單樣式
/*一級選單三態樣式,供JS呼叫*/
.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;}
二級菜單樣式
/*二級選單三態樣式,供JS呼叫*/
.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;}
行為層：
因為前面已經提到，我們在樣式表並沒有定義選單的三態效果，所以我們需要給每個選單項目綁定onmouseover、onmouseout和onclick事件模擬出這種效果。在結構層中我們並沒有定義這個總容器的ID，而只定義了一個class類名，所以在JS添加了一個擴展的getElementsByClassName()方法（感謝好友司徒正美），根據類別名稱來獲得這個物件。用循環閉包來綁定這三個事件。
詳細程式碼就不一一解說了，Demo中註解得非常清楚，請下載到本機瀏覽。
有什麼問題請在本部落格跟貼討論，祝你用得開心！
<li><a href="#none">一級選單項目</a>
<ul>
<li><a href="#none">二級選單項目</a></li>
</ul>
</li>