求树型菜单.具体请进.

http://expert.csdn.net/Expert/topic/2188/2188654.xml?temp=.4591181

解决方案 »

  1.   

    <!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://www.isyuan.com/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>
      

  2.   

    <BODY>
    <xml id=menuXML>
    <?xml version="1.0" encoding="gb2312"?>
    <all>
    <menu text="网站" href="http://www.blueidea.com">
    <DSMenu_ITEM text="技术论坛" href="http://www.blueidea.com" target="_self" >
    <DSMenu_ITEM text="5DMedia">
    <DSMenu_ITEM text="网页编码" href="http://" target="_self" />
    <DSMenu_ITEM text="手绘" href="http://" target="_self" />
    <DSMenu_ITEM text="灌水" href="http://" target="_self" />
    <DSMenu_ITEM text="网页编码" href="http://" target="_self" />
    <DSMenu_ITEM text="手绘" href="http://" target="_self" />
    <DSMenu_ITEM text="灌水" href="http://" target="_self" />
    </DSMenu_ITEM>
    <DSMenu_ITEM text="BlueIdea">
    <DSMenu_ITEM text="DWEAM WEAVER" href="http://" target="_self" />
    <DSMenu_ITEM text="手绘" href="http://" target="_self" />
    <DSMenu_ITEM text="灌水" href="http://" target="_self" >
    <DSMenu_ITEM text="DWEAM WEAVER" href="http://" target="_self" />
    <DSMenu_ITEM text="手绘" href="http://" target="_self" />
    <DSMenu_ITEM text="灌水" href="http://" target="_self" />
    <DSMenu_ITEM text="DW" href="http://" target="_self" />
    <DSMenu_ITEM text="手绘" href="http://" target="_self" >
    <DSMenu_ITEM text="DWEAM WEAVER" href="http://" target="_self" />
    <DSMenu_ITEM text="手绘" href="http://" target="_self" />
    <DSMenu_ITEM text="灌水" href="http://" target="_self" >
    <DSMenu_ITEM text="DWEAM WEAVER" href="http://" target="_self" />
    <DSMenu_ITEM text="手绘" href="http://" target="_self" />
    <DSMenu_ITEM text="灌水" href="http://" target="_self" >
    </DSMenu_ITEM>
    <DSMenu_ITEM text="DW" href="http://" target="_self" />
    <DSMenu_ITEM text="手绘" href="http://" target="_self" />
    <DSMenu_ITEM text="灌水" href="http://" target="_self" />
    <DSMenu_ITEM text="DreamWeaver &amp; JS" href="http://" target="_self" />
    <DSMenu_ITEM text="FlashActionScript" href="http://" target="_self" />
    </DSMenu_ITEM>
    <DSMenu_ITEM text="DW" href="http://" target="_self" />
    <DSMenu_ITEM text="手绘" href="http://" target="_self" />
    <DSMenu_ITEM text="灌水" href="http://" target="_self" />
    <DSMenu_ITEM text="DreamWeaver &amp; JS" href="http://" target="_self" />
    <DSMenu_ITEM text="FlashActionScript" href="http://" target="_self" />
    </DSMenu_ITEM>
    <DSMenu_ITEM text="灌水" href="http://" target="_self" />
    <DSMenu_ITEM text="DreamWeaver &amp; JS" href="http://" target="_self" />
    <DSMenu_ITEM text="FlashActionScript" href="http://" target="_self" />
    </DSMenu_ITEM>
    <DSMenu_ITEM text="DW" href="http://" target="_self" />
    <DSMenu_ITEM text="手绘" href="http://" target="_self" />
    <DSMenu_ITEM text="灌水" href="http://" target="_self" />
    <DSMenu_ITEM text="DreamWeaver &amp; JS" href="http://" target="_self" />
    <DSMenu_ITEM text="FlashActionScript" href="http://" target="_self" />
    </DSMenu_ITEM>
    <DSMenu_ITEM text="CSDN">
    <DSMenu_ITEM text="JS" href="http://" target="_self" />
    <DSMenu_ITEM text="XML" href="http://" target="_self" />
    </DSMenu_ITEM>
    </DSMenu_ITEM>
    <DSMenu_ITEM text="资源站点">
    <DSMenu_ITEM text="素材屋" href="http://" target="_self" />
    <DSMenu_ITEM text="桌面城市">
    <DSMenu_ITEM text="壁纸" href="http://" target="_self" />
    <DSMenu_ITEM text="字体" href="http://" target="_self" />
    </DSMenu_ITEM>
    <DSMenu_ITEM text="MSDN">
    <DSMenu_ITEM text="DHTML" href="http://" target="_self" />
    <DSMenu_ITEM text="HTC" href="http://" target="_self" />
    <DSMenu_ITEM text="XML" href="" target="_self" />
    </DSMenu_ITEM>
    </DSMenu_ITEM>
    <DSMenu_ITEM text="资源站点">
    <DSMenu_ITEM text="素材屋" href="http://" target="_self" />
    <DSMenu_ITEM text="桌面城市">
    <DSMenu_ITEM text="壁纸" href="http://" target="_self" />
    <DSMenu_ITEM text="字体" href="http://" target="_self" />
    </DSMenu_ITEM>
    <DSMenu_ITEM text="MSDN">
    <DSMenu_ITEM text="DHTML" href="http://" target="_self" />
    <DSMenu_ITEM text="HTC" href="http://" target="_self" >
    <DSMenu_ITEM text="资源站点">
    <DSMenu_ITEM text="素材屋" href="http://" target="_self" />
    <DSMenu_ITEM text="桌面城市">
    <DSMenu_ITEM text="壁纸" href="http://" target="_self" />
    <DSMenu_ITEM text="字体" href="http://" target="_self" />
    </DSMenu_ITEM>
    <DSMenu_ITEM text="MSDN">
    <DSMenu_ITEM text="DHTML" href="http://" target="_self" />
    <DSMenu_ITEM text="HTC" href="http://" target="_self" />
    <DSMenu_ITEM text="XML" href="" target="_self" />
    </DSMenu_ITEM>
    </DSMenu_ITEM>
    </DSMenu_ITEM>
    <DSMenu_ITEM text="XML" href="http://www.blueida.com" target="_self" />
    </DSMenu_ITEM>
    </DSMenu_ITEM>
    </menu><menu text="Java">
    <DSMenu_ITEM text="Java"></DSMenu_ITEM>
    <DSMenu_ITEM text="websphere"></DSMenu_ITEM>
    <DSMenu_ITEM text="IBM Websphere 信息中心" target="_blank" href="http://www-4.ibm.com/software/webservers/appserv/doc/v35/se/infocenter-zh/index.html">
    <DSMenu_ITEM text="Java"></DSMenu_ITEM>
    <DSMenu_ITEM text="websphere"></DSMenu_ITEM>
    </DSMenu_ITEM>
    </menu>
    </all>
    </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>
      

  3.   

    http//www.anfy.com
    去看看applet做的tree吧，超炫，绝对不是JS所能比的，还有很多其他特效，都是APPLET:)
      

  4.   


    <%@page contentType="text/html;charset=gb2312"%>
    <%@page language="java" import="java.sql.*"%>
    <%//设置session，提供用户登陆接口
    session.setAttribute("userName","blueriver");
    String topMenu;
    topMenu=(String)session.getAttribute("userName");
    %>
    <%
    String sDBDriver="sun.jdbc.odbc.JdbcOdbcDriver";
    try
    {
    Class.forName(sDBDriver);
    }
    catch(java.lang.ClassNotFoundException e)
    {
    System.err.println(e.getMessage());
    }
    %>
    <%!
    public ResultSet executeQuery(String sql)
    {
    String sConnStr="jdbc:odbc:tree";
    Connection conn=null;
    ResultSet rs=null;
    rs=null;
    try
    {
    conn=DriverManager.getConnection(sConnStr);
    Statement stmt=conn.createStatement();
    rs=stmt.executeQuery(sql);
    }
    catch(SQLException ex)
    {
    System.err.println(ex.getMessage());
    }

    return rs;
    }
    %>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <title>树状菜单 </title>
    <style><!--
    A:link {text-decoration:none}
    A:visited {text-decoration:none}
    A:hover {color:#99CCFF;text-decoration:none}
    -->
    </style>
    <script LANGUAGE="JavaScript">
    <!--
    //每个节点有一个数组,包含 4+n个元素 
    //  node[0]为0/1 对应节点的展开/关闭
    //  node[1]为0/1 对应文件夹的关闭/展开
    //  node[2]为1 如果节点的子节点是文档
    //  node[3]是节点的名称
    //  node[4]...node[4+n]为n个子节点// 初始化菜单的数据function generateTree()
    {
    //var aux1, aux2, aux3, aux4
    var aux
    aux=new ArrayfoldersTree = folderNode("我的网站")
    <%
    //menu_id,menu_name,parent_menu_id,folder_or_file,menu_location
    String sql="select * from tree_menu ";
    ResultSet RS;
    RS=executeQuery(sql);
    try
    {

    while(RS.next())
    {
    String foldersTree;
    int id=RS.getInt("menu_id");
    int loc=RS.getInt("menu_location");
    int parent=RS.getInt("parent_menu_id");
    int folder_or_file=RS.getInt("folder_or_file");
    if(loc==1){
    foldersTree="foldersTree";
    }else{
    //foldersTree="aux"+(int)(loc-1);
    foldersTree="aux["+parent+"]";
    }
    //if(folder_or_file==1){
     //out.println("aux"+loc+" = appendChild("+foldersTree+", folderNode('<a href=main.jsp?menuid="+id+"&loc="+loc+" target=folderFrame>"+RS.getString("menu_name")+"</a>'));");
    out.println("aux["+id+"]"+" = appendChild("+foldersTree+", folderNode('<a href=main.jsp?menuid="+id+"&loc="+loc+" target=folderFrame>"+RS.getString("menu_name")+"</a>'));");
    //}else{
    //aux[id]=appendchild(foldersTree, folderNode("<a href=main.jsp?menuid="+id+"&loc="+loc+" target=folderFrame>"+RS.getString("menu_name")+"</a>"))
    //out.println("appendChild("+foldersTree+", generateDocEntry(0, '"+RS.getString("menu_name")+"', 'sample1.htm', ''));");
    //}
    }

    }
    catch(Exception e)
    {
    out.println(e.toString());
    }
    %>

    }// 创建节点的辅助函数
    function folderNode(name)
    {
    var arrayAux
    arrayAux = new Array
    arrayAux[0] = 0
    arrayAux[1] = 0
    arrayAux[2] = 0
    arrayAux[3] = name
            
            return arrayAux
    }
    function leafNode(name)
    {
    var arrayAux
    arrayAux = new Array
    arrayAux[0] = 0
    arrayAux[1] = 0
    arrayAux[2] = 1
    arrayAux[3] = name
            
            return arrayAux
    }function appendChild(parent, child)
    {
    parent[parent.length] = child
    return child
    }function generateDocEntry(icon, docDescription, link)
    {
    var retString ="" if (icon==0)
    retString = "<A href='"+link+"' target=folderFrame><img src='doc.gif' alt='在右边框架中打开'"
    else
    retString = "<A href='"+link+"' target=_blank><img src='link.gif' alt='在新窗口中打开'"
    retString = retString + " border=0></a><td nowrap><font style='font-size:9pt;font-family:宋体'>" + docDescription + "</font>" return retString}
    //刷新树状菜单
    function redrawTree()
    {
        var doc = top.treeFrame.window.document doc.clear()
    doc.write("<body bgcolor='white'>")
    redrawNode(foldersTree, doc, 0, 1, "")
    doc.close()
    }function redrawNode(foldersNode, doc, level, lastNode, leftSide)
    {
    var j=0
    var i=0 doc.write("<table border=0 cellspacing=0 cellpadding=0>")
    doc.write("<tr><td valign = middle nowrap>") doc.write(leftSide) if (level>0)
    if (lastNode) //'brother'子节点数组中有否兄弟节点
    {
    doc.write("<img src='lastnode.gif' width=16 height=22>")
    leftSide = leftSide + "<img src='blank.gif' width=16 height=22>" 
    }
    else
    {
    doc.write("<img src='node.gif' width=16 height=22>")
    leftSide = leftSide + "<img src='vertline.gif' width=16 height=22>"
    } displayIconAndLabel(foldersNode, doc)
    doc.write("</table>") if (foldersNode.length > 4 && foldersNode[0]) //有更低层的节点和文件夹展开着
    {
    if (!foldersNode[2])//带文件夹的文件夹
    {
    level=level+1
    for (i=4; i<foldersNode.length;i++)
    if (i==foldersNode.length-1)
    redrawNode(foldersNode[i], doc, level, 1, leftSide)
    else
    redrawNode(foldersNode[i], doc, level, 0, leftSide)
    }
    else //带文档的文件夹
    {
    for (i=4; i<foldersNode.length;i++)
    {
    doc.write("<table border=0 cellspacing=0 cellpadding=0 valign=center>")
    doc.write("<tr><td nowrap>")
    doc.write(leftSide)
    if (i==foldersNode.length - 1)
    doc.write("<img src='lastnode.gif' width=16 height=22>")
    else
    doc.write("<img src='node.gif' width=16 height=22>")
    doc.write(foldersNode[i])
    doc.write("</table>")
    }
    }
    }
    }function displayIconAndLabel(foldersNode, doc)
    {
    doc.write("<A href='javascript:top.openBranch(\"" + foldersNode[3] + "\")'><img src=")
    if (foldersNode[1])
    doc.write("openfolder.gif width=24 height=22 border=noborder></a>")
    else
    doc.write("closedfolder.gif width=24 height=22 border=noborder></a>")
    doc.write("<td valign=middle align=left nowrap>")
    doc.write("<font style='font-size:9pt;font-family:宋体'>"+foldersNode[3]+"</font>")
    }
    //树收拢时调用的函数//当父节点关闭,其所有的子节点也都闭合
    function closeFolders(foldersNode)
    {
    var i=0        if (!foldersNode[2])
    {
             for (i=4; i< foldersNode.length; i++)
                closeFolders(foldersNode[i]) }
            foldersNode[0] = 0
            foldersNode[1] = 0
    }//收拢节点
    function clickOnFolderRec(foldersNode, folderName)
    {
    var i=0        if (foldersNode[3] == folderName)
    {
    if (foldersNode[0])
    closeFolders(foldersNode)
    else
    {
    foldersNode[0] = 1
                     foldersNode[1] = 1
    }
    }
    else
    {
             if (!foldersNode[2])
             for (i=4; i< foldersNode.length; i++)
                clickOnFolderRec(foldersNode[i], folderName)
    }
    }
    //打开分支
    function openBranch(branchName)
    {
    clickOnFolderRec(foldersTree, branchName)
    if (branchName=="Start folder" && foldersTree[0]==0)
    top.folderFrame.location="basefolder.htm"
    timeOutId = setTimeout("redrawTree()",100)
    }//页面载入时的初始化
    function initializeTree()
    {
    generateTree()
    redrawTree()
    }var foldersTree = 0
    var timeOutId = 0
    generateTree() 
    -->
    </script>
    </HEAD>
    <FRAMESET cols="200,*"  onLoad='initializeTree()'> 
      <FRAME src="basetree.htm" name="treeFrame">
      <FRAME SRC="basefolder.htm" name="folderFrame">
    </FRAMESET>
    <noframes>
    </noframes> 
    </HTML>
      

  5.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    </head><body bgcolor="#FFFFFF" >
    <style>
    <!--
    .skin0 {
    position:absolute;
    text-align:left;
    width:200px;
    border:2px solid black;
    background-color:menu;
    font-family:Verdana;
    line-height:20px;
    cursor:default;
    visibility:hidden;
    }
    .skin1 {
    cursor:default;
    font:menutext;
    position:absolute;
    text-align:left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    width:120px;
    background-color:menu;
    border:1 solid buttonface;
    visibility:hidden;
    border:2 outset buttonhighlight;
    }
    .menuitems {
    padding-left:15px;
    padding-right:10px;
    }
    -->
    </style><SCRIPT LANGUAGE="JavaScript1.2">
    <!-- Web Site:  http://www.painting-effects.co.uk --><!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com --><!-- Begin
    var menuskin = "skin1"; // skin0, or skin1
    var display_url = 0; // Show URLs in status bar?
    function showmenuie5() {
    var rightedge = document.body.clientWidth-event.clientX;
    var bottomedge = document.body.clientHeight-event.clientY;
    if (rightedge < ie5menu.offsetWidth)
    ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
    else
    ie5menu.style.left = document.body.scrollLeft + event.clientX;
    if (bottomedge < ie5menu.offsetHeight)
    ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
    else
    ie5menu.style.top = document.body.scrollTop + event.clientY;
    ie5menu.style.visibility = "visible";
    return false;
    }
    function hidemenuie5() {
    ie5menu.style.visibility = "hidden";
    }
    function highlightie5() {
    if (event.srcElement.className == "menuitems") {
    event.srcElement.style.backgroundColor = "highlight";
    event.srcElement.style.color = "white";
    if (display_url)
    window.status = event.srcElement.url;
       }
    }
    function lowlightie5() {
    if (event.srcElement.className == "menuitems") {
    event.srcElement.style.backgroundColor = "";
    event.srcElement.style.color = "black";
    window.status = "";
       }
    }
    function jumptoie5() {
    if (event.srcElement.className == "menuitems") {
    if (event.srcElement.getAttribute("target") != null)
    window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
    else
    window.location = event.srcElement.url;
       }
    }
    //  End -->
    </script>
    <div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5();">
    <div class="menuitems" url="javascript:history.back();">返回</div>
    <div class="menuitems" url="http://javacool.3322.net">回首页</div>
    <hr>
    <div class="menuitems" url="http://www.163.com">网易</div>
    <div class="menuitems" url="http://www.sohu.com">搜狐</div>
    <hr>
    <div class="menuitems" url="http://www.sina.com.cn">新浪</div>
    <div class="menuitems" url="http://www.yahoo.com.cn">雅虎</div>
    </div>
    <script language="JavaScript1.2">
    if (document.all && window.print) {
    ie5menu.className = menuskin;
    document.oncontextmenu = showmenuie5;
    document.body.onclick = hidemenuie5;
    }
    </script>
    </body>
    </html>