简洁的多级树形导航菜单

lyndon.lin

简洁的多级树形导航菜单
<ul id="menuList">
 <li class="menubar">
  <a href="#" id="productsActuator" class="actuator">我的收藏夹</a>
 
  <ul id="productsMenu" class="menu">
  <li>
   <a href="#" id="newPhonesActuator" class="actuator">个人网站</a>
   <ul id="newPhonesMenu" class="submenu">
    <li><a href="http://www.butong.net/">网页代码库</a></li>
    <li><a href="http://www.w3cn.org/">网页设计师</a></li>
    <li><a href="http://www.junchenwu.com/">JunChen博客</a></li>
    <li><a href="http://www.andymao.com/andy/">毅博客</a></li>
   </ul>
  </li>
   <li>
   <a href="#" id="compareActuator" class="actuator">国外网站</a>
   <ul id="compareMenu" class="submenu">
    <li><a href="http://www.alistapart.com/">A List Apart</a></li>
    <li><a href="http://www.csszengarden.com/">CSS禅意花园</a></li>
    <li><a href="http://www.456bereastreet.com/">456 Berea Street</a></li>
    <li><a href="http://www.w3.org/">W3C网站</a></li>
   </ul>
  </li>
  </ul>
 </li>
</ul>
 
#menuList {
 margin: 0px;
 padding: 10px 0px 10px 15px;
 border: 1px solid #CCC;
 width: 203px;
 background-color: #EEE;
 color: #000;
 font-family: verdana, helvetica, arial, sans-serif;
}
 
li.menubar {
 font-size: 12px;
 line-height: 1.8em;
 list-style: none;
}
 
.menu, .submenu {
 display: none;
 margin-left: 15px;
 padding: 0px;
}
 
.menu li, .submenu li {
 list-style: none;
}
 
#menuList a {
 background-color: transparent;
 color: #000;
 font-size: 12px;
 margin-left: 15px;
 text-decoration: none;
}
 
#menuList a:hover {
 text-decoration: underline;
}
 
if (!document.getElementById) {
 document.getElementById = function() { return null; }
}
function initializeMenu(menuId, actuatorId) {
 var menu = document.getElementById(menuId);
 var actuator = document.getElementById(actuatorId);
 if (menu == null || actuator == null) return;
 actuator.onclick = function() {
  var display = menu.style.display;
  menu.style.display = (display == "block") ? "none" : "block";
  return false;
 }
}
window.onload = function() {
 initializeMenu("productsMenu", "productsActuator");
 initializeMenu("newPhonesMenu", "newPhonesActuator");
 initializeMenu("compareMenu", "compareActuator");
}