100分求CSDN左边的树状菜单代码(需有详解)

[email protected]..我也想看一下.谢谢

偶也需要啊...
Email:[email protected]谢谢了

我写的代码不好用,大家帮忙看看是为什么?
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>树状菜单</title>

<script language ="javascript">
//定义基本变量
var itemTitle=new Array();
var itemContent=new Array();
var itemExpand=new Array();
var numItem=0;
var borderSize=0;
var expandId="expandDiv";
var layerWidth=300;
var layerIndent=1;
var layerHeight="<br>";
var layerColor="FFFFFF";
//浏览器判断
var ns4=(document.layers)?true:false;
var ie4=(document.all)?true:false;
//保存要加入的菜单项
function AddMenu(title,content){
  itemTitle[numItem]=title;
  itemContent[numItem]=content;
  itemExpand[numItem]=0;
  numItem++;
  }
//换图片
function set_closeImage(url){
  closeImage="<img src="+url+"border=0>";
  }
//换图片
function set_openImage(url){
  openImage="<img src="+url+"border=0>";
  }
//缩进
function set_indent(indent){
  layerIndent=indent;
  }
function set_indent(height){
  layerheight=height;
  }
//创建菜单
function CreatMenu(width,height,left,top,border,bgcolor){
//设置显示风格属性
  borderSize=border;
  layerWidth=width;
  layerColor=bgcolor;
  outWidth=width+borderSize;
  document.writeln ('<STYLE>');
  document.write ('#expandDiv{position:absolute;left:'+left+';top:'+top+';width:'+width+';height:'+height+';}');
  document.writeln('</STYLE>');
//创建菜单
  document.writeln('<DIV ID="expandDiv">');
  document.writeln('<table border=0 cellspacing=8 cellpadding='+borderSize+'width='+layerWidth+'><tr><td bgcolor=green>');
  document.writeln('<table border=0 cellspacing=0 cellpadding=3 width=100% bgcolor='+layerColor+'><TR><TD>');
//二级菜单
  for (i=0;i<numItem;i++){
  document.writeln('<a href="JavaScript:toggle_expand('+i+') DispMenu()">'+closeImage+itemTitle[i]+'</a><BR>');
  }
  document.writeln('</TD></TR></TABLE></TD></TR></TABLE>');
  document.writeln('</DIV>');
  }
//显示二级菜单
function toggle_expand(num){
  itemExpand[num]=itemExpand[num] ? 0:1;
  }
//隐藏二级菜单
function DispMenu(){
  var replaceText="";
  replaceText+='<table border=0 cellspacing=8 cellpadding='+borderSize+'width='+layerWidth+'><TR><TD bgcolor = green>';
  replaceText+='<table border=0 cellspacing=0 cellpadding=3 width=100% bgcolor='+layerColor+'><TR><TD>';
  for(i=0;i<numItem;i++){
    if (itemExpand[i]==1){
       replaceText+="<a href=\"Javascript:toggle_expand("+i+");DispMenu()\">"+openImage+itemTitle[i]+"</a>"+layerHeight;
       replaceText+="<table width="+layerWidth+"><tr><td>";
         for(j=0;j<layerIndent;j++){
           replaceText+=" ";
           }
       replaceText+="</td><td>";
       replaceText+=itemContent[i]+"</td></tr></table>";
       }
    else{
    replaceText+="<a href=\"JavaScript:toggle_expand("+i+") DispMenu()\">"+closeImage+itemTitle[i]+"</a><BR>";
    }
  }
replaceText+="</TD></TR></TABLE></TD></TR></TABLE>";
if(ns4){
  var lyr=document.layers[expandId].document;
  lyr.open();
  lyr.writeln(replaceText);
  lyr.close();
  }
else{
//隐藏二级菜单
document.all[expandId].innerHTML=replaceText;
}
}
//加入菜单项内容
arrow="<img src=up.gif border=0>";
content=arrow+"<A href='jingguan/32-1.htm'target='mainFrame'>子菜单一</A><BR>"+arrow+"<A href='jinggua/j13.htm' target='mainFrame'>子菜单二</A><BR>"+arrow+"<A href='jingguan/j14.htm' target='mainFrame'>子菜单三</A<BR>"+arrow+"<A href='jingguan/j15.htm' target='mainFrame'>子菜单四</A><BR>";
AddMenu("父菜单一",content);
content=arrow+"<A href='jingguan/32-1.htm'target='mainFrame'>子菜单一</A><BR>"+arrow+"<A href='jinggua/j13.htm' target='mainFrame'>子菜单二</A><BR>"+arrow+"<A href='jingguan/j14.htm' target='mainFrame'>子菜单三</A<BR>"+arrow+"<A href='jingguan/j15.htm' target='mainFrame'>子菜单四</A><BR>";
AddMenu("父菜单二",content);
content=arrow+"<A href='jingguan/32-1.htm'target='mainFrame'>子菜单一</A><BR>"+arrow+"<A href='jinggua/j13.htm' target='mainFrame'>子菜单二</A><BR>"+arrow+"<A href='jingguan/j14.htm' target='mainFrame'>子菜单三</A<BR>"+arrow+"<A href='jingguan/j15.htm' target='mainFrame'>子菜单四</A><BR>";
AddMenu("父菜单三",content);
content=arrow+"<A href='jingguan/32-1.htm'target='mainFrame'>子菜单一</A><BR>"+arrow+"<A href='jinggua/j13.htm' target='mainFrame'>子菜单二</A><BR>"+arrow+"<A href='jingguan/j14.htm' target='mainFrame'>子菜单三</A<BR>"+arrow+"<A href='jingguan/j15.htm' target='mainFrame'>子菜单四</A><BR>";
AddMenu("父菜单四",content);
set_closeImage("close.gif");
set_openImage("open.gif");
</script>

<style type="text/css">

</style>
</head><body leftmargin =0 topmargin =0 bgcolor ="#ffffff">

<script language ="javascript">
CreatMenu(320,250,0,0,0,"#FFffff")
</script>
</body></html>

我也要一份，[email protected],多谢1

偶也要一份.
[email protected]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> DSTree </TITLE>
<META NAME="Author" CONTENT="[email protected]" >
<style>
body,td{font:12px verdana}
#treeBox{background-color:#fffffa;}
#treeBox .ec{margin:0 5 0 5;}
#treeBox .hasItems{font-weight:bold;height:20px;padding:3 6 0 6;margin:2px;cursor:hand;color:#555555;border:1px solid #fffffa;}
#treeBox .Items{height:20px;padding:3 6 0 6;margin:1px;cursor:hand;color:#555555;border:1px solid #fffffa;}
</style>
<base href="http://vip.5d.cn/star/dstree/" />
<script>
//code by star 20003-4-7
var HC = "color:#990000;border:1px solid #cccccc";
var SC = "background-color:#efefef;border:1px solid #cccccc;color:#000000;";
var IO = null;
function initTree(){
var rootn = document.all.menuXML.documentElement;
var sd = 0;
document.onselectstart = function(){return false;}
document.all.treeBox.appendChild(createTree(rootn,sd));
}
function createTree(thisn,sd){
var nodeObj = document.createElement("span");
var upobj = document.createElement("span");
with(upobj){
style.marginLeft = sd*10;
className = thisn.hasChildNodes()?"hasItems":"Items";
innerHTML = "<img src=expand.gif class=ec>" + thisn.getAttribute("text") +"";

onmousedown = function(){
if(event.button != 1) return;
if(this.getAttribute("cn")){
this.setAttribute("open",!this.getAttribute("open"));
this.cn.style.display = this.getAttribute("open")?"inline":"none";
this.all.tags("img")[0].src = this.getAttribute("open")?"expand.gif":"contract.gif";
}
if(IO){
IO.runtimeStyle.cssText = "";
IO.setAttribute("selected",false);
}
IO = this;
this.setAttribute("selected",true);
this.runtimeStyle.cssText = SC;
}
onmouseover = function(){
if(this.getAttribute("selected"))return;
this.runtimeStyle.cssText = HC;
}
onmouseout = function(){
if(this.getAttribute("selected"))return;
this.runtimeStyle.cssText = "";
}
oncontextmenu = contextMenuHandle;
onclick = clickHandle;
} if(thisn.getAttribute("treeId") != null){
upobj.setAttribute("treeId",thisn.getAttribute("treeId"));
}
if(thisn.getAttribute("href") != null){
upobj.setAttribute("href",thisn.getAttribute("href"));
}
if(thisn.getAttribute("target") != null){
upobj.setAttribute("target",thisn.getAttribute("target"));
} nodeObj.appendChild(upobj);
nodeObj.insertAdjacentHTML("beforeEnd","<br/>") if(thisn.hasChildNodes()){
var i;
var nodes = thisn.childNodes;
var cn = document.createElement("span");
upobj.setAttribute("cn",cn);
if(thisn.getAttribute("open") != null){
upobj.setAttribute("open",(thisn.getAttribute("open")=="true"));
upobj.getAttribute("cn").style.display = upobj.getAttribute("open")?"inline":"none";
if( !upobj.getAttribute("open"))upobj.all.tags("img")[0].src ="contract.gif";
}

for(i=0;i<nodes.length;cn.appendChild(createTree(nodes[i++],sd+1)));
nodeObj.appendChild(cn);
}
else{
upobj.all.tags("img")[0].src ="endnode.gif";
}
return nodeObj;
}
window.onload = initTree;
</script><script>
function clickHandle(){
// your code here
}
function contextMenuHandle(){
event.returnValue = false;
var treeId = this.getAttribute("treeId");
// your code here
}
</script>
</HEAD>
<BODY>
<xml id=menuXML>
<?xml version="1.0" encoding="GB2312"?>
<DSTreeRoot text="根节点" open="true" href="http://" treeId="123">

<DSTree text="技术论坛" open="false" treeId="">
<DSTree text="5DMedia" open="false" href="http://" target="box" treeId="12">
<DSTree text="网页编码" href="http://" target="box" treeId="4353" />
<DSTree text="手绘" href="http://" target="box" treeId="543543" />
<DSTree text="灌水" href="http://" target="box" treeId="543543" />
</DSTree>
<DSTree text="BlueIdea" open="false" href="http://" target="box" treeId="213">
<DSTree text="DreamWeaver & JS" href="http://" target="box" treeId="4353" />
<DSTree text="FlashActionScript" href="http://" target="box" treeId="543543" />
</DSTree>
<DSTree text="CSDN" open="false" href="http://" target="box" treeId="432">
<DSTree text="JS" href="http://" target="box" treeId="4353" />
<DSTree text="XML" href="http://" target="box" treeId="543543" />
</DSTree>
</DSTree> <DSTree text="资源站点" open="false" treeId="">
<DSTree text="素材屋" href="http://" target="box" treeId="12" />
<DSTree text="桌面城市" open="false" href="http://" target="box" treeId="213">
<DSTree text="壁纸" href="http://" target="box" treeId="4353" />
<DSTree text="字体" href="http://" target="box" treeId="543543" />
</DSTree>
<DSTree text="MSDN" open="false" href="http://" target="box" treeId="432">
<DSTree text="DHTML" href="http://" target="box" treeId="4353" />
<DSTree text="HTC" href="http://" target="box" treeId="543543" />
<DSTree text="XML" href="" target="box" treeId="2312" />
</DSTree>
</DSTree></DSTreeRoot>
</xml>
<table style="position:absolute;left:100;top:100;">
<tr><td id=treeBox style="width:400px;height:200px;border:1px solid #cccccc;padding:5 3 3 5;" valign=top></td></tr>
<tr><td style="font:10px verdana;color:#999999" align=right>by <font color=#660000>sTar</font><br/> 2003-4-8</td></tr>
</table>
</BODY>
</HTML>

上这个上面看看吧！
挺全的，我下了试了还是不错的！
http://www.yemaweb.com
ＪＳ的，ＡＳＰ的，ＰＨＰ的都有！哈哈
好好学习，天天向上！

还有吗？
我也要一份呀！
[email protected]
谢谢！

http://fason.nease.net/samples/xtree/，下不了啊.......

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>树状菜单</title>
<style>

</style>
<script language="JavaScript1.2">

</script>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="../style.css" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">

</style>
<script language="JavaScript" type="text/JavaScript">

</script>
</head><body>
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1">
  <table width="200" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <ul>
          <li class="aa style2" id="foldheader">组织科</li>
          <ul id="foldinglist" style="display:none; color: #000000;">
            <li><a href="zgzc.asp" class="bb" target="_self">党建制度</a></li>
            <ul id="foldinglist1" style="display:none">
              <li class="aa"><a href="zgzc.asp" class="bb" >a栏</a></li>
              <li class="aa"><a href="zgzc.asp" class="bb" target="_self">b栏</a></li>
              <li class="aa"><a href="zgzc.asp" class="bb" target="_self">c栏</a></li>
              <li class="aa"><a href="zgzc.asp" class="bb" target="_self">d栏</a></li>
            </ul>
            <li class="aa" id="foldheader1">创新成果</li>
            <ul id="foldinglist1" style="display:none">
              <li class="aa"><a href="zgzc.asp" class="bb" >a栏</a></li>
              <li class="aa"><a href="zgzc.asp" class="bb" target="_self">立项选题活动</a></li>
              <li class="aa"><a href="zgzc.asp" class="bb" target="_self">其它创新成果</a></li>
              <li class="aa"><a href="zgzc.asp" class="bb" target="_self">d栏</a></li>
            </ul>
            <li class="aa" id="foldheader1">特色活动</li>
            <ul id="foldinglist1" style="display:none">
              <li class="aa"><a href="zgzc.asp" class="bb" >a栏</a></li>
              <li class="aa"><a href="zgzc.asp" class="bb" target="_self">b栏</a></li>
              <li class="aa"><a href="zgzc.asp" class="bb" target="_self">c栏</a></li>
              <li class="aa"><a href="zgzc.asp" class="bb" target="_self">d栏</a></li>
            </ul>
          </ul>
          <script language="JavaScript1.2">

    </script>
      </ul></td>
    </tr>
  </table>
</div>
<div align="left"></div>
</body>
</html>

调试易

100分求CSDN左边的树状菜单代码(需有详解)

解决方案 »