树型菜单做法菜单导航__脚本特效_后台技术飞飞Asp技术乐园

树型菜单做法

时间： 2007-09-27 12:58:47　阅读次数：3056

这种树型菜单怎么做?哪里可以下载js代码?
http://bbs.auto.tom.com/

实例参考1：

<base href="http://www.blueidea.com/articleimg/2003/09/804/">
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DWMX Tutor --- A Simple Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script>
function findObj(theObj, theDoc)
{
  var p, i, foundObj;
  
  if(!theDoc) theDoc = document;
  if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)
  {
    theDoc = parent.frames[theObj.substring(p+1)].document;
    theObj = theObj.substring(0,p);
  }
  if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];
  for (i=0; !foundObj && i < theDoc.forms.length; i++) 
    foundObj = theDoc.forms[i][theObj];
  for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) 
    foundObj = findObj(theObj,theDoc.layers[i].document);
  if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);
  
  return foundObj;
}
</script>
<style type="text/css">

</style>
<style type="text/css">

</style>
<base target="browserframe"/>
</head>

<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="150" align="center" valign="top" class="explorer" id="menubar"><br />      
      <img src="logo.gif" width="90" height="27" />      
   <br />
      <br />      
      <table width="100%" border="0" cellspacing="0" cellpadding="2" onselectstart="return false">
      <tr>
        <td class="folder" onmouseup="with(findObj('blueidea').style){display=display=='none'?'':'none';this.style.backgroundImage=display!='none'?'url(e.gif)':'url(c.gif)'}">Blueidea.com</td>
      </tr>

<tr>
        <td class="submenu" id="blueidea"><table width="100%" border="0" cellspacing="0" cellpadding="2">
            <tr>
              <td class="folder" onmouseup="with(findObj('forums').style){display=display=='none'?'':'none';this.style.backgroundImage=display!='none'?'url(e.gif)':'url(c.gif)'}">Forums</td>
            </tr>
            <tr>
              <td class="submenu" id="forums"><table width="100%" border="0" cellspacing="0" cellpadding="2">
                  <tr>

<td class="iefile"><a href="http://bbs.blueidea.com/forumdisplay.php?fid=1">JS &amp; DWMX</a></td>
                  </tr>
                  <tr>
                    <td class="iefile"><a href="http://bbs.blueidea.com/forumdisplay.php?fid=2">Developement</a></td>
                  </tr>
                  <tr>
                    <td class="iefile"><a href="http://bbs.blueidea.com/forumdisplay.php?fid=3">Fireworks</a></td>

</tr>
                  <tr>
                    <td class="iefile"><a href="http://bbs.blueidea.com/forumdisplay.php?fid=4">Flash</a></td>
                  </tr>
                  <tr>
                    <td class="iefile"><a href="http://bbs.blueidea.com/forumdisplay.php?fid=7">Photoshop</a></td>
                  </tr>
      
                </table>

</td>
            </tr>
            <tr>
              <td class="folder" onmouseup="with(findObj('others').style){display=display=='none'?'':'none';this.style.backgroundImage=display!='none'?'url(e.gif)':'url(c.gif)'}">Others</td>
            </tr>
            <tr>
              <td class="submenu" id="others"><table width="100%" border="0" cellspacing="0" cellpadding="2">
                  <tr>

<td class="iefile"><a href="http://www.blueidea.com/download/index.asp">Download</a></td>
                  </tr>
                  <tr>
                    <td class="iefile"><a href="http://www.blueidea.com/tech/index.asp">Documents</a></td>
                  </tr>
                </table>
              </td>
            </tr>

<tr>
              <td class="iefile"><a href="http://www.blueidea.com/">Homepage</a></td>
            </tr>
            <tr>
              <td class="iefile"><a href="http://bbs.blueidea.com/">BBS</a></td>
            </tr>
          </table>
        </td>

</tr>
      <tr>
        <td class="collapsedFolder" onmouseup="with(findObj('lexrus').style){display=display=='none'?'':'none';this.style.backgroundImage=display!='none'?'url(e.gif)':'url(c.gif)'}">LeXRus.com</td>
      </tr>
      <tr>
        <td class="submenu" id="lexrus" style="display:none">
  <table width="100%" border="0" cellpadding="2" cellspacing="0">
            <tr>

<td class="iefile"><a href="http://www.lexrus.com/">Homepage</a></td>
            </tr>
            <tr>
              <td class="iefile"><a href="http://lexrus.com/blog/">Blog</a></td>
            </tr>
          </table>
        </td>
      </tr>

</table></td>
    <td width="1" class="ctrlbar">
 <button class="ctbutton" onfocus="blur();" onmouseup="with(findObj('menubar').style){display=display=='none'?'':'none';this.innerText=display=='none'?'&gt;':'&lt;'}" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#eeeeee'">&lt;</button></td>
    <td class="explorer">
 <iframe name="browserframe" id="browserframe" width="100%" height="100%" scrolling="auto" frameborder="0"></iframe></td>
  </tr>
</table>
</body>
</html>

提示：您可以先修改部分代码再运行

实例2:

<STYLE type=text/css>BODY {
 FONT-SIZE: 9pt
}
A:link {
 CURSOR: hand; COLOR: #ffffff; FONT-STYLE: normal; TEXT-DECORATION: none
}
A:visited {
 COLOR: black; FONT-STYLE: normal; TEXT-DECORATION: none
}
A:active {
 COLOR: red; FONT-STYLE: normal; TEXT-DECORATION: none
}
A:hover {
 COLOR: #ff0000; TEXT-DECORATION: underline
}
</STYLE>
<SCRIPT>
var icon={
 root :'http://bbs.auto.tom.com/images/3.0/left/root.gif',
 open :'http://bbs.auto.tom.com/images/3.0/left/3.gif',
 close :'http://bbs.auto.tom.com/images/3.0/left/close.png',
 file :'http://bbs.auto.tom.com/images/3.0/left/b.gif',
 Rplus :'http://bbs.auto.tom.com/images/3.0/left/Rplus.gif',
 Rminus :'http://bbs.auto.tom.com/images/3.0/left/Rminus.gif',
 join :'http://bbs.auto.tom.com/images/3.0/left/rline.gif',
 joinbottom:'http://bbs.auto.tom.com/images/3.0/left/L.gif',
 plus :'http://bbs.auto.tom.com/images/3.0/left/plus.gif',
 plusbottom:'http://bbs.auto.tom.com/images/3.0/left/Lplus.gif',
 minus :'http://bbs.auto.tom.com/images/3.0/left/minus.gif',
 minusbottom:'http://bbs.auto.tom.com/images/3.0/left/Lminus.gif',
 blank :'http://bbs.auto.tom.com/images/3.0/left/blank.gif',
 line :'http://bbs.auto.tom.com/images/3.0/left/line.gif'
};
var Global={
 id:0,
 getId:function(){return this.id++;},
 all:[],
 selectedItem:null,
 defaultText:"treeItem",
 defaultAction:"javascript:void(0)",
 defaultTarget:"_blank"
}
function preLoadImage(){
 for(i in icon){
  var tem=icon[i];
  icon[i]=new Image()
  icon[i].src=tem
 }
};preLoadImage();
function treeItem(text,action,target,title,Icon)
{
 if (title!=undefined) {
  temptitle=title.toString();
 }
 if (action!=undefined) {
  tempaction=action.toString();
 }
 this.id=Global.getId();
 this.level=0;
 this.text=text?text:Global.defaultText;
 this.action=action?action:Global.defaultAction;
 this.target=target?target:Global.defaultTarget;
 if (temptitle == "catalog") {
  temptitle=tempaction.toString();
  if ( temptitle!="" ) {
   ltemptitle=temptitle.substring(temptitle.indexOf("=")+1);
   this.realload=false;
   this.cid=ltemptitle;
//   alert(this.cid);
   this.title="catalog";
  }
 } else {
  this.title=title?title:this.text;
  this.realload=true;
 }
 temptitle="";
 ltemptitle="";
 rtemptitle="";
// if ( "catalog" == title ) {
// } else {
//  this.title=title?title:this.text;
//  this.realload=true;
// }
 this.isLast=true;
 this.childNodes=new Array();
 this.indent=new Array();
 this.parent=null;
 var c =0; 
 //if(getCookie("item"+this.id) != null) c = getCookie("item"+this.id);
 this.open=parseInt(c);
 this.load=false;
 this.setuped=false;
 this.JsItem=null;
 this.container=document.createElement("div");
 this.icon=Icon;
 Global.all[Global.all.length]=this;
}
treeItem.prototype.toString = function()
{
 var o = this;
 var oItem = document.createElement("div");
 oItem.id = "treeItem"+this.id
 oItem.className = "treeItem";
 oItem.noWrap = true;
 oItem.onselectstart = function(){ return false;}
// oItem.oncontextmenu = function(){ return false;}
 this.JsItem = oItem;
 this.drawIndents();
 var iIcon = document.createElement("img");
 iIcon.align = "absmiddle";
 iIcon.id = "treeItem-icon-handle-" + this.id;
 if (this.text == Global.defaultText) {
  iIcon.src = "http://bbs.auto.tom.com/images/3.0/left/blank.gif";
  iIcon.width = 1;
  iIcon.height = 1;
 } else {
  iIcon.onclick = function(){ o.toggle();};
  //iIcon.src = this.childNodes.length>0?(this.open?(this.level>0?(this.isLast?icon.minusbottom.src:icon.minus.src):icon.Rminus.src):(this.level>0?(this.isLast?icon.plusbottom.src:icon.plus.src):icon.Rplus.src)):(this.level>0?(this.isLast?icon.joinbottom.src:icon.join.src):icon.blank.src);
  iIcon.src = this.childNodes.length>0?(this.open?(this.level>0?(icon.minus.src):icon.Rminus.src):(this.level>0?(icon.plus.src):icon.Rplus.src)):(this.level>0?(icon.join.src):icon.blank.src);
 }
 oItem.appendChild(iIcon);
 var iIcon = document.createElement("img");
 iIcon.align = "absmiddle";
 iIcon.id = "treeItem-icon-folder-" + this.id;
 if (this.text == Global.defaultText) {
  iIcon.src = "http://bbs.auto.tom.com/images/3.0/left/blank.gif";
  iIcon.width = 1;
  iIcon.height = 1;
 } else {
  //iIcon.onclick = function(){ o.select();};
  //iIcon.ondblclick = function(){ o.toggle();};
  iIcon.onclick = function(){ o.toggle();};
  //iIcon.style = "cursor:hand;";
  //iIcon.src = this.icon?this.icon:(this.childNodes.length>0?(this.open?icon.open.src:icon.close.src):icon.file.src);
  iIcon.src = this.icon?this.icon:(this.childNodes.length>0?(this.open?icon.open.src:icon.close.src):icon.file.src);
 }
 oItem.appendChild(iIcon);
 var eText = document.createElement("span");
 var eA=document.createElement("a");
 
 if (this.text == Global.defaultText) {
 } else {
  if (this.title == "catalog") {
   eA.innerHTML = "<FONT color=D0FDA8 style='padding-left = 3px;'>"+this.text+"</FONT>";
  } else {
   eA.innerHTML = (this.action == "folder")?"<FONT color=D0FDA8 style='padding-left = 3px;'>"+this.text+"</FONT>":"<FONT color=FFFFFF style='padding-left = 3px;'>"+this.text+"</FONT>";
  }
 }
 eA.target = this.target;
 eA.href = this.action;
// eA.onkeydown = function(e){ return o.KeyDown(e);}
 if(this.action == Global.defaultAction) eA.onclick = function(){ return false;}
  if (this.title == "catalog") {
   eA.onclick = function(){ o.toggle(); return false;};
//   eA.onclick = function(){ o.gocatalog();o.toggle(); return false;};
  } else {
   if (this.action == "folder") eA.onclick = function(){ o.toggle(); return false;};
  }
 eText.appendChild(eA);
 eText.id = "treeItem-text-" + this.id;
 eText.className = "treeItem-unselect"
 eText.onclick = function(){ o.select(1);};
 eText.title = (this.title == "catalog")?this.text:this.title;
 oItem.appendChild(eText);
 this.container.id = "treeItem-container-"+this.id;
 this.container.style.display = this.open?"":"none";
 oItem.appendChild(this.container);
 return oItem;
}
treeItem.prototype.root = function()
{
 var p = this;
 while(p.parent)
  p = p.parent;
 return p;
}
treeItem.prototype.setText = function(sText)
{
 if(this.root().setuped)
 {
  var oItem = document.getElementById("treeItem-text-" + this.id);
  oItem.firstChild.innerHTML = sText;
 }
 this.text = sText;
}
treeItem.prototype.setIndent = function(l,v)
{
 for(var i=0;i<this.childNodes.length;i++)
 {
  this.childNodes[i].indent[l] = v;
  this.childNodes[i].setIndent(l,v);
 }
}
treeItem.prototype.drawIndents = function()
{
 var oItem = this.JsItem;
 for(var i=0;i<this.indent.length;i++){
  var iIcon = document.createElement("img");
  iIcon.align = "absmiddle";
  iIcon.id = "treeItem-icon-" + this.id + "-" + i;
  if (this.text == Global.defaultText) {
   iIcon.src = "http://bbs.auto.tom.com/images/3.0/left/blank.gif";
   iIcon.width = 1;
   iIcon.height = 1;
  } else {
   //iIcon.src = this.indent[i]?icon.blank.src:icon.line.src;
   iIcon.src = "http://bbs.auto.tom.com/images/3.0/left/blank.gif";
   iIcon.width = 1;
   iIcon.height = 1;
  }
  oItem.appendChild(iIcon);
 }
}
treeItem.prototype.add = function(oItem)
{
 oItem.parent=this;
 this.childNodes[this.childNodes.length]=oItem;
 oItem.level=this.level+1;
 oItem.indent=this.indent.concat();
 oItem.indent[oItem.indent.length]=this.isLast;
 if(this.childNodes.length>1){
  var o=this.childNodes[this.childNodes.length-2];
  o.isLast=false;
  o.setIndent(o.level,0);
  if(this.root().setuped)o.reload(1);
 }
 else if(this.root().setuped)
  this.reload(0);
 this.container.appendChild(oItem.toString());
 this.container.style.display=this.open?"":"none";
}
treeItem.prototype.loadChildren = function()
{
 //do something
}
treeItem.prototype.remove = function()
{
 var tmp = this.getPreviousSibling();
 //if(tmp){ tmp.select();}
 this.removeChildren();
 var p = this.parent;
 if(!p){ return };
 if(p.childNodes.length>0){
  var o = p.childNodes[p.childNodes.length-1];
  o.isLast = true;
  o.setIndent(o.level,1);
  if(o.root().setuped)o.reload(1);
 }
 else
  p.reload();
}
treeItem.prototype.removeChildren = function ()
{
 if(this == Global.selectedItem){ Global.selectedItem = null;}
 for(var i=this.childNodes.length-1;i>=0;i--)
  this.childNodes[i].removeChildren();
 var o = this;
 var p = this.parent;
 if (p) { p.childNodes = p.childNodes._remove(o);}
 Global.all[this.id] = null
 var oItem = document.getElementById("treeItem"+this.id);
 if (oItem) { oItem.parentNode.removeChild(oItem); }
}
treeItem.prototype.reload = function(flag)
{
 if (flag){
  for(var j=0;j<this.childNodes.length;j++){ this.childNodes[j].reload(1);}
  for(var i=0;i<this.indent.length;i++)
   //document.getElementById("treeItem-icon-" +this.id+ "-"+i).src = this.indent[i]?icon.blank.src:icon.line.src;
   document.getElementById("treeItem-icon-" +this.id+ "-"+i).src = this.indent[i]?icon.blank.src:icon.line.src;
 }
 if (this.text == Global.defaultText) {
 } else if (this.childNodes.length>0){
  document.getElementById("treeItem-icon-handle-" +this.id).src = this.childNodes.length>0?(this.open?(this.level>0?(icon.minus.src):icon.Rminus.src):(this.level>0?(icon.plus.src):icon.Rplus.src)):(this.level>0?(icon.line.src):icon.blank.src);
 } else {
  document.getElementById("treeItem-icon-handle-" +this.id).src = this.childNodes.length>0?(this.open?(this.level>0?(icon.minus.src):icon.Rminus.src):(this.level>0?(icon.plus.src):icon.Rplus.src)):(this.level>0?(icon.line.src):icon.blank.src);
 }
 if (!this.icon)
  //document.getElementById("treeItem-icon-folder-"+this.id).src = this.childNodes.length>0?(this.open?icon.open.src:icon.close.src):icon.file.src;
  document.getElementById("treeItem-icon-folder-"+this.id).src = this.childNodes.length>0?icon.open.src:icon.file.src;
  document.getElementById("treeItem-icon-folder-"+this.id).width = (document.getElementById("treeItem-icon-folder-"+this.id).src.indexOf("minus.gif")>0)?18:((document.getElementById("treeItem-icon-folder-"+this.id).src.indexOf("blank.gif")>0)?1:16);
  document.getElementById("treeItem-icon-folder-"+this.id).height = (document.getElementById("treeItem-icon-folder-"+this.id).src.indexOf("blank.gif")>0)?1:16;
  if (this.childNodes.length>0) document.getElementById("treeItem-icon-handle-" +this.id).style.cursor = "hand";
  if (this.childNodes.length>0) document.getElementById("treeItem-icon-folder-"+this.id).style.cursor = "hand";
 if (this.text=="我要退出") document.getElementById("treeItem-icon-handle-" +this.id).src = this.open?icon.minus.src:icon.plusbottom.src;
 if (this.text=="完全退出") document.getElementById("treeItem-icon-handle-" +this.id).src = icon.joinbottom.src;
}
treeItem.prototype.gocatalog = function()
{
 if (this.id) eval("top."+this.target+".location.href='catalog.php?cid="+this.id+"';");
}
treeItem.prototype.toggle = function()
{
 if(this.childNodes.length>0){
  if(this.open) {
   this.collapse();
  } else {
   this.root().collapseChildren();
   if (this.realload) {
   } else {
    var item;
    item=catalogexpand(parseInt(this.cid));
    var aItem=new Array();
    aItem=item.split("|");
    aItem.length=aItem.length-1;
    for(var i=1;i<=aItem.length;i++) {
     eval(aItem[i-1]);
     eval("this.add(item"+i+");");
//     this.parentNode.appendChild(this.childNodes[parseInt(i)].toString());
//     this.childNodes[parseInt(i)].setuped = true;
    }
    item=null;
    this.reload(1);
    this.realload=true;
   }
   this.expand();
  }
 }
}
treeItem.prototype.expand = function()
{
 this.open=1;
// setCookie("item"+this.id,1);
 if(!this.load){
  this.load=true;
  this.loadChildren();
  this.reload(1);
 }
 else 
  this.reload(0);
 this.container.style.display = "";
}
treeItem.prototype.collapse = function()
{
 this.open=0;
// setCookie("item"+this.id,0);
 this.container.style.display = "none";
 this.reload(0);
 this.select(1);
}
treeItem.prototype.expandAll = function()
{
 if(this.childNodes.length>0 && !this.open)this.expand();
 this.expandChildren();
}
treeItem.prototype.collapseAll = function()
{
 this.collapseChildren();
 if(this.childNodes.length>0 && this.open)this.collapse();
}
treeItem.prototype.expandChildren = function()
{
 for(var i=0;i<this.childNodes.length;i++)
 this.childNodes[i].expandAll();
}
treeItem.prototype.collapseChildren = function()
{
 for(var i=0;i<this.childNodes.length;i++)
 this.childNodes[i].collapseAll()
}
treeItem.prototype.openURL=function()
{
 if(this.action!=Global.defaultAction){
  window.open(this.action,this.target);
 }
}
treeItem.prototype.select=function(o)
{
 if (Global.selectedItem) Global.selectedItem.unselect();
 var oItem = document.getElementById("treeItem-text-" + this.id);
 oItem.className = "treeItem-selected";
 oItem.firstChild.focus();
 Global.selectedItem = this;
 if(!o) this.openURL();
}
treeItem.prototype.unselect=function()
{
 var oItem = document.getElementById("treeItem-text-" + this.id);
 oItem.className = "treeItem-unselect";
 oItem.firstChild.blur();
 Global.selectedItem = null;
}
treeItem.prototype.setup = function(oTaget)
{
 oTaget.appendChild(this.toString());
 this.setuped = true;
 if(this.childNodes.length>0 || this.open) this.expand();
}

/*****************************************************/
Array.prototype.indexOf=function(o){
 for(var i=0;i<this.length;i++)
  if(this[i]==o)return i;
 return -1;
}
Array.prototype.removeAt=function(i){
 return this.slice(0,i).concat(this.slice(i+1))
}
Array.prototype._remove=function(o){
 var i=this.indexOf(o);
 if(i!= -1) return this.removeAt(i)
 return this
}
/*****************************************************/

/*****************************************************/
function setCookie(name,value)
{
    var Days = 7; 
    var exp  = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name)
{
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
    if(arr != null) return unescape(arr[2]); return null;
}
function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
</SCRIPT>
<META content="MSHTML 6.00.2800.1505" name=GENERATOR></HEAD>
<BODY bgcolor="144F57">
<DIV id=tree></DIV>
<SCRIPT language=JavaScript>

</SCRIPT>
<SCRIPT language=JavaScript>

</SCRIPT>
</BODY>

提示：您可以先修改部分代码再运行