树型菜单的制作

要动态的调用一个树型菜单,在网上找了一下,发现这个比较好,发上来和大家分享一下:
第一步:将下面的代码复制到<head>~</head>里

     <script language=JavaScript1.2>
scores = new Array(20);
var numTotal=0;
NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
ver4 = (NS4 || IE4) ? 1 : 0;

if (ver4) {
     with (document) {
         write("<STYLE TYPE='text/css'>");
         if (NS4) {
             write(".parent {position:absolute; visibility:visible}");
             write(".child {position:absolute; visibility:visible}");
             write(".regular {position:absolute; visibility:visible}")
         }
         else {
             write(".child {display:none}")
         }
         write("</STYLE>");
     }
}

function getIndex(el) {
     ind = null;
     for (i=0; i<document.layers.length; i++) {
         whichEl = document.layers[i];
         if (whichEl.id == el) {
             ind = i;
             break;
         }
     }
     return ind;
}

function arrange() {
     nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;
     for (i=firstInd+1; i<document.layers.length; i++) {
         whichEl = document.layers[i];
         if (whichEl.visibility != "hide") {
             whichEl.pageY = nextY;
             nextY += whichEl.document.height;
         }
     }
}

function initIt(){
     if (!ver4) return;
     if (NS4) {
         for (i=0; i<document.layers.length; i++) {
             whichEl = document.layers[i];
             if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
        }
         arrange();
     }
     else {
         divColl = document.all.tags("DIV");
         for (i=0; i<divColl.length; i++) {
             whichEl = divColl(i);
             if (whichEl.className == "child") whichEl.style.display = "none";
         }
     }
}

function expandIt(el) {
if (!ver4) return;
     if (IE4) {
         whichEl1 = eval(el + "Child");
   for(i=1;i<=numTotal;i++){
    whichEl = eval(scores[i] + "Child");
    if(whichEl!=whichEl1) {
     whichEl.style.display = "none";
    }
   }
         whichEl1 = eval(el + "Child");
         if (whichEl1.style.display == "none") {
             whichEl1.style.display = "block";
         }
         else {
             whichEl1.style.display = "none";
         }
     }
     else {
         whichEl = eval("document." + el + "Child");
   for(i=1;i<=numTotal;i++){
    whichEl = eval("document." + scores[i] + "Child");
    if(whichEl!=whichEl1) {
     whichEl.visibility = "hide";
    }
   }
         if (whichEl.visibility == "hide") {
             whichEl.visibility = "show";
         }
         else {
             whichEl.visibility = "hide";
         }
         arrange();
     }
}
onload = initIt;
</script>

第二步:将下面的代码复制到<body>~</body>里
     <div id=KB1Parent>
   <a onClick="expandIt('KB1');return false" href="#"><img src="plus.gif" border=0>精品下载</a>
</div>
<div class=child id=KB1Child>
   <a href="#"><img src="blank.gif" border=0>Dreamweaver 资源</a><br>
   <a href="#"><img src="blank.gif" border=0>Fireworks 资源</a><br>
   <a href="#"><img src="blank.gif" border=0>Flash 资源</a><br>
   <a href="#"><img src="blank.gif" border=0>Photoshop 资源</a>
</div>
<div   id=KB2Parent>
   <a onClick="expandIt('KB2');return false" href="#"><img src="plus.gif" border=0>免费申请</a>
</div>
<div class=child id=KB2Child>
   <a href="#"><img src="blank.gif" border=0>免费计数器申请</a><br>
<a href="#"><img src="blank.gif" border=0>免费留言板申请</a><br>
   <a href="#"><img src="blank.gif" border=0>免费网上调查申请</a></div>
<div   id=KB3Parent>
   <a onClick="expandIt('KB3');return false" href="#"><img src="plus.gif" border=0>酷站源码</a>
</div>
<div class=child id=KB3Child>
   <a href="#"><img src="blank.gif" border=0>脚本收集</a><br>
<a href="#"><img src="blank.gif" border=0>HTML特效</a><br>
   <a href="#"><img src="blank.gif" border=0>ASP源程序下载</a><br>
   <a href="#"><img src="blank.gif" border=0>XML方面</a><br>
</div>
<script>numTotal=3;scores[1]='KB1';scores[2]='KB2';scores[3]='KB3';</script>

     把这两段代码分别粘到相应的位置,运行一下就可以看到效果了,至于动态的嘛,链一下数据库,就OK了,赶快试一下吧!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值