後台/OA 系統常用全屏佈局：頁頭、頁腳、左側菜單 + 右側 iframe。一個全兼容、可高亮、二級緩沖折疊的菜單是剛需。本文分享一個經實戰驗證的通用實現方案。

核心特性

• 全兼容：IE5.5/6/7/8、FF3.0、Chrome、Safari 4.0、Opera 9.0 測試通過
• HTML 結構優雅：無冗餘標籤，利於程式循環輸出
• 結構樣式分離：單改 CSS 即可換膚
• 雙層高亮：一級/二級菜單項均支持當前態高亮
• 優雅緩沖：折疊/展開平滑動畫
• 場景精準：專為後台/OA 系統設計

已知限制

1. 不支持防刷新（後台系統通常無需此功能）
2. IE6 下緩沖動畫降級（弱化為無動畫切換）

實現思路拆解

結構層：語義化嵌套列表

核心結構為巢狀 <ul>：

<ul class="menu">
  <li class="level1"><a href="#">一級項目</a>
    <ul class="level2">
      <li><a href="#">二級項目</a></li>
    </ul>
  </li>
  <li class="level1"><a href="#">無子項一級</a></li>
</ul>

僅需三個掛鉤 class：.menu（根）、.level1（一級項）、.level2（二級容器），即可通過後代選擇器控制所有樣式。

表現層：三態樣式預定義

為配合 JS 控制，預定義三態類名（非 :hover）：

/* 一級項三態 */
.menu li.level1 a       { display:block; line-height:31px; height:31px; padding-left:50px; background:url(menubg.gif) no-repeat left top; }
.menu li.level1 a.hove  { background-position:left -31px; }
.menu li.level1 a.cur   { background-position:left -62px; }

/* 二級項三態 */
.menu .level2 li a      { display:block; line-height:25px; height:25px; padding-left:60px; background:url(subbg.gif) no-repeat left top; }
.menu .level2 li a.hove { background-position:left -25px; }
.menu .level2 li a.cur  { background-position:left -50px; }

行為層：事件綁定與狀態機

• 擴展 getElementsByClassName() 獲取根容器
• 迴圈閉包為每個一級項綁定 mouseover/mouseout/click
• 點擊切換 .level2 顯示/隱藏並觸發緩沖動畫
• 同步管理 .cur/.hove 類名實現高亮邏輯

完整註釋源碼請下載 Demo 離線研讀。歡迎留言討論技術細節！