类似与QQ的好友/黑名单之类的树型菜单

类似与QQ的好友/黑名单之类的树型菜单

<BODY>
<script>
if (!document.getElementById)powered by 25175.net
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(/images/plus.gif)";
    actuator.onclick = function() {
        var display = menu.style.display;
        this.parentNode.style.backgroundImage =
            (display == "block") ? "url(/images/plus.gif)" : "url(/images/minus.gif)";
        menu.style.display = (display == "block") ? "none" : "block";

        return false;
    }
}
window.onload = function() {
            initializeMenu("productsMenu", "productsActuator");
            initializeMenu("newPhonesMenu", "newPhonesActuator");
            initializeMenu("compareMenu", "compareActuator");
        }
</script>
<style>
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(/images/plus.gif) no-repeat 0em 0.3em;
font-size: 12px;
line-height: 1.5em;
list-style: none outside;
}

.menu, .submenu {
display: none;
margin-left: 15px;
padding: 0px;
}

.menu li, .submenu li {
background: url(/images/square.gif) 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>
</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="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li>
                <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li>
                <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li>
                <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li>
              </ul>
            </li>
            <li>
              <a href="#" id="compareActuator" class="actuator">陌生人</a>
              <ul id="compareMenu" class="submenu">
                <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li>
                <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li>
                <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li>
                <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
</body>
</BODY>

【内容导航】
第1页：完全用CSS实现的中英文双语导航菜单(经典)	第2页：商业风格的CSS垂直菜单
第3页：突起的导航栏效果[经典]	第4页：点击显示的FAQ菜单效果[经典]
第5页：一款DIV+CSS闪动导航条效果(经典)	第6页：非常酷的CSS菜单效果B(经典)
第7页：非常酷的CSS菜单效果A（经典）	第8页：会旋转的菜单导航（经典）
第9页：带项目描述的导航菜单（经典）	第10页：聚合的导航菜单效果（经典）
第11页：整合在IE中的导航条（经典）	第12页：含下拉菜单的绿色导航条
第13页：关联菜单（连动菜单）	第14页：可拖动的导航菜单
第15页：多级滚动菜单	第16页：微软导航菜单
第17页：鼠标移到文字上自动展开	第18页：点击渐显的导航菜单
第19页：随机网站推荐脚本	第20页：网站内快捷键导航
第21页：左侧导航菜单类似按钮	第22页：可移动的导航栏
第23页：页面顶部多级导航栏	第24页：浮动、隐藏的导航菜单
第25页：上下弹动的导航条	第26页：鼠标指向显示次级菜单
第27页：漂亮的仿flash菜单	第28页：滑动的层作菜单导航
第29页：精彩的跳动菜单效果	第30页：类似与QQ的好友/黑名单之类的树型菜单
第31页：定时改变标题栏的内容

菜单导航集合

类似与QQ的好友/黑名单之类的树型菜单