树型菜单的制作

转载 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了,赶快试一下吧!

C# 递归显示 TreeView 树状菜单树!

///         /// 初始化显示树型菜单         ///         private void showTreeviewMenu()         {           ...
  • ufocode
  • ufocode
  • 2015年01月20日 12:05
  • 1307

C#动态加载树菜单

在做权限系统的时候,需要有一个树形的菜单。下图就是一个树形菜单的样式     但问题是,我们可以实现写死的树形菜单。什么是写死的?就是在前台代码中写好要加载的树形菜单是什么样子的。但是我们权限系...
  • huanjileaimeidan
  • huanjileaimeidan
  • 2014年03月21日 00:00
  • 2910

jQuery 树型菜单插件(Treeview)

jQuery 树型菜单插件(Treeview) jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单。试用于一些菜单的导航,支持基于 cookie 的持久性菜单。 i...
  • yang5726685
  • yang5726685
  • 2016年12月30日 01:41
  • 366

目录菜单树的实现及查询

要求: 获取用户能操作的资源集合,这里主要考虑菜单树的获取 框架: springboot + hibernate 菜单树的逻辑是:子菜单存单,父菜单也得存在。 算法逻辑: 传入资源节点Node...
  • m0_37530301
  • m0_37530301
  • 2017年06月20日 20:38
  • 218

java从数据库读取菜单,递归生成菜单树

java从数据库读取菜单,递归生成菜单树
  • frankcheng5143
  • frankcheng5143
  • 2016年10月29日 13:44
  • 16952

简单的 ul li 树形菜单

简单的 ul li 树形菜单在实际开发中,我们经常遇到树形菜单,闲暇之余,特此简单研究了一下,欢迎吐槽!前言 所谓的树形菜单,无非就是 ul li的嵌套使用,如果有两级目录,就需要在li里再嵌套一...
  • u011613356
  • u011613356
  • 2015年11月12日 15:36
  • 2289

php无限分类与树形菜单

  • dengfei00100
  • dengfei00100
  • 2016年12月22日 17:52
  • 1647

angularjs--制作树形菜单

效果图 数据源 /* Controllers */ function ctrDataList($scope) { $scope.ctrDataList_list = [ { "title"...
  • qianqianyixiao1
  • qianqianyixiao1
  • 2016年01月15日 17:40
  • 5199

前端 js树形菜单代码

TODO sup
  • dengfei00100
  • dengfei00100
  • 2015年12月29日 16:03
  • 3176

三行代码实现树形菜单(xmlTree标签实例)

xmlTree标签实例,三行代码实现树形菜单:1、引入树操作JavaScript脚本文件;2、图片路径及节点编号首字符;3、引入xml文件并显示树形菜单...
  • tx18
  • tx18
  • 2015年04月03日 10:39
  • 10632
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:树型菜单的制作
举报原因:
原因补充:

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