简洁美观的树形菜单

更新时间：2009年07月07日点击数： 357

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<title>炫浪设计素材-图片特效-简洁美观的树形菜单</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">

<style type="text/css">
body {
  font-family: verdana, helvetica, arial, sans-serif;
}
#mainMenu {
  background-color: #EEE;
  border: 1px solid #CCC;
  color: #000;
  width: 203px;
}
#menuList {
  margin: 0px;
  padding: 10px 0px 10px 15px;
}
li.menubar {
  background: url(http://d2.xvna.com/sc/scimg/closed1.gif?http://www.xvna.com) no-repeat 0em 0.3em;
  font-size: 12px;
  line-height: 2em;
  list-style: none outside;
}
.menu, .submenu {
  display: none;
  margin-left: 15px;
  padding: 0px;
}
.menu li, .submenu li {
  background: url(http://d2.xvna.com/sc/scimg/child3.gif?http://www.xvna.com) no-repeat 0em 0.3em;
  list-style: none outside;
}
a.actuator {
  background-color: transparent;
  color: #000;
  font-size: 12px;
  padding-left: 15px;
  text-decoration: none;
}
a.actuator:hover {
  text-decoration: underline;
}
.menu li a, .submenu li a {
  background-color: transparent;
  color: #000;
  font-size: 12px;
  padding-left: 15px;
  text-decoration: none;
}
.menu li a:hover, submenu li a:hover {
  /*border-bottom: 1px dashed #000;*/
  text-decoration: underline;
}
span.key {
  text-decoration: underline;
}
</style>
<script language="javascript">
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;
    //if (window.opera) return; // I'm too tired
    actuator.parentNode.style.backgroundImage = "url(http://d2.xvna.com/sc/scimg/closed1.gif?http://www.xvna.com)";
    actuator.onclick = function() {
        var display = menu.style.display;
        this.parentNode.style.backgroundImage =
            (display == "block") ? "url(/images/plus.gif?http://www.xvna.com)" : "url(http://d2.xvna.com/sc/scimg/opened1.gif?http://www.xvna.com)";
        menu.style.display = (display == "block") ? "none" : "block";
        return false;
    }
}
 window.onload = function() {
            initializeMenu("productsMenu", "productsActuator");
            initializeMenu("newPhonesMenu", "newPhonesActuator");
            initializeMenu("compareMenu", "compareActuator");
        }
</script>
</head>
<body>

<div id="mainMenu">
  <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="#">张三[10000001]</a></li>
            <li><a href="#">李四[10000002]</a></li>
            <li><a href="#">张三[10000001]</a></li>
            <li><a href="#">李四[10000002]</a></li>
          </ul>
        </li>
        <li>
          <a href="#" id="compareActuator" class="actuator">陌生人</a>
          <ul id="compareMenu" class="submenu">
            <li><a href="#">张三[10000001]</a></li>
            <li><a href="#">李四[10000002]</a></li>
            <li><a href="#">张三[10000001]</a></li>
            <li><a href="#">李四[10000002]</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

建立连接

赞助商链接

炫友推荐

炫浪推广

【注意】炫浪网版权所有,未经书面授权禁止模仿风格或建立镜像网站.如有违反,追究法律责任.
【声明】本网站部分内容属社区网友发布，本网站仅提供网友交流平台，但有权在本网站范围内引用、发布、
转载来自社区网友发布的内容。网友发布内容纯属个人行为，与本网站立场无关。本网站对于网友发布的
内容所引发的版权、署名权的异议及纠纷，不承担任何责任。粤ICP备11064832号公安备案编号：4453023010550