树型菜单的制作

转载 2015年09月06日 14:34:11

要动态的调用一个树型菜单,在网上找了一下,发现这个比较好,发上来和大家分享一下:
第一步:将下面的代码复制到<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了,赶快试一下吧!

相关文章推荐

树型动态菜单

  • 2015年08月02日 09:19
  • 25KB
  • 下载

浪无影ASP树型菜单源码

  • 2005年07月01日 21:53
  • 0B
  • 下载

php 从数据库读取数据并生成树型可折叠菜单

非常酷的各种树型菜单

  • 2006年02月23日 09:05
  • 85KB
  • 下载

树型无限限菜单设计模式

为了达到能够在浏览器中快速打开多节点树的页面,我做了很多的优化与创新,下面我将详细解说几项最重要的部分: 数据一次性加载 首先我要说的就是数据的一次性加载。在目前的 B/S架构开发中对于多节...

js 实现 树型目录菜单

  • 2010年03月30日 14:49
  • 3KB
  • 下载

DIV+CSS+JS二级树型菜单,展开后刷新无影响

DIV+CSS+JS二级树型菜单,展开后刷新无影响

Web 树型菜单 V1.5.0

  • 2008年08月21日 00:31
  • 30KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:树型菜单的制作
举报原因:
原因补充:

(最多只允许输入30个字)