高分求网页的树型菜单的源代码

Question

简单点的就来下面两个吧
http://cfj61.myetang.com/gryc/index_contents.htm
http://chtong.nease.net/js_dw/tx_js/s034.htm

Answer 1

http://expert.csdn.net/Expert/topic/1986/1986285.xml?temp=.9895288http://fason.nease.net/zhuanti/tree/deeptree.rar

Answer 2

var mimgpath="treeimg";
var mfonts="style=\"text-decoration:none;font-family: 宋体; font-size: 9pt; color: #000000; \"";
var movercolor="#0000FF";
var mnormalcolor="#000000";
var NC6=(navigator.userAgent.indexOf("Netscape6")>0)?true:false;
var IE=(document.all)?true:false;
function mOver(id) {
if (IE) {eval(id).style.color=movercolor; } 
else if(NC6){ document.getElementById(id).style.color=movercolor;}
}
function mOut(id) {
if (IE) {eval(id).style.color=mnormalcolor; } 
else if(NC6){ document.getElementById(id).style.color=mnormalcolor;}
}function mFolderExpand($1,$2,pic) {
if (IE) { mExpandIE($1,$2,pic) } 
else if(NC6){ mExpandNC($1,$2,pic) }
}function mExpandIE($1,$2,pic) {
Expanda = eval($1 + "a");
Expanda.blur()
ExpandChild = eval($1 + "Child");
    if ($2 != "top") { 
ExpandTree = eval($1 + "Tree");
//ExpandFolder = eval($1 + "Folder");
}
if (ExpandChild.style.display == "none") {
ExpandChild.style.display = "block";
        if ($2 != "top") { 
            if ($2 == "last") { ExpandTree.src = mimgpath+"/Lminus.gif"; }
else { ExpandTree.src = mimgpath+"/Tminus.gif"; }
//ExpandFolder.src = mimgpath+"/openfolder"+pic+".gif";
}
else { mmTree.src = mimgpath+"/topopen1.gif"; }
}else{
ExpandChild.style.display = "none";
        if ($2 != "top") { 
        if ($2 == "last") { ExpandTree.src = mimgpath+"/Lplus.gif"; }
else { ExpandTree.src = mimgpath+"/Tplus.gif"; }
//ExpandFolder.src = mimgpath+"/folder"+pic+".gif";
}
else { mmTree.src = mimgpath+"/top1.gif"; }
}
}
function mExpandNC($1,$2,pic) {
Expanda = document.getElementById($1 + "a");
Expanda.blur()
ExpandChild = document.getElementById($1 + "Child");
    if ($2 != "top") { 
ExpandTree = document.getElementById($1 + "Tree");
//ExpandFolder = document.getElementById($1 + "Folder");
}
if (ExpandChild.style.display == "none") {
ExpandChild.style.display = "block";
        if ($2 != "top") { 
            if ($2 == "last") { ExpandTree.src = mimgpath+"/Lminus.gif"; }
else { ExpandTree.src = mimgpath+"/Tminus.gif"; }
//ExpandFolder.src = mimgpath+"/openfolder"+pic+".gif";
}
else { document.getElementById("mmTree").src = mimgpath+"/topopen1.gif"; }
}else{
ExpandChild.style.display = "none";
        if ($2 != "top") { 
        if ($2 == "last") { ExpandTree.src = mimgpath+"/Lplus.gif"; }
else { ExpandTree.src = mimgpath+"/Tplus.gif"; }
//ExpandFolder.src = mimgpath+"/folder"+pic+".gif";
}
else {document.getElementById("mmTree").src = mimgpath+"/top1.gif"; }
}
}
with(document){
write("<div ID=\"mmParent\"><a ID=\"mma\" href=\"#\" style=\"text-decoration:none;font-family: 宋体; font-size: 9pt; color: #000000; \" onClick=\"mFolderExpand('mm','top',null)\">");
write("<img ID=\"mmTree\" src=\""+mimgpath+"/topopen1.gif\" style=\"margin-right: 5\" align=\"absmiddle\" border=\"0\">");
write("<font ID=\"mTitle0\" onmouseover=\"mOver('mTitle0')\" onmouseout=\"mOut('mTitle0')\"></font></a></div>");
write("<div ID=\"mmChild\"><div ID=\"mm1Parent\"><a ID=\"mm1a\" target=\"_self\" href=\"#\" "+mfonts+" onClick=\"mFolderExpand('mm1',null,'4')\" title=\"\">");
write("<img ID=\"mm1Tree\" src=\""+mimgpath+"/Tplus.gif\" align=\"absmiddle\" border=\"0\"><font ID=\"mTitle1\" onmouseover=\"mOver('mTitle1')\" onmouseout=\"mOut('mTitle1')\">文件</font></a>");
write("</div>");
write("<div ID=\"mm1Child\" style=\"display:none;\">");
write("<div ID=\"mm2Parent\"><a ID=\"mm2a\" target=\"_self\" href=\"#\" "+mfonts+" onClick=\"mFolderExpand('mm2',null,'0')\" title=\"\">");
write("<img src=\""+mimgpath+"/I.gif\" align=\"absmiddle\" width=\"19\" height=\"20\" border=\"0\"><img ID=\"mm2Tree\" src=\""+mimgpath+"/Tplus.gif\" align=\"absmiddle\" border=\"0\"><font ID=\"mTitle2\" onmouseover=\"mOver('mTitle2')\" onmouseout=\"mOut('mTitle2')\">新建</font></a>");
write("</div>");
write("<div ID=\"mm2Child\" style=\"display:none;\">");
write("<img src=\""+mimgpath+"/I.gif\" align=\"absmiddle\" width=\"19\" height=\"20\" border=\"0\"><img src=\""+mimgpath+"/I.gif\" align=\"absmiddle\" width=\"19\" height=\"20\" border=\"0\"><img src=\""+mimgpath+"/L.gif\" align=\"absmiddle\" width=\"19\" height=\"20\" border=\"0\"><a target=\"mainFrame\" href=\"main.htm\" "+mfonts+" title=\"\"><font ID=\"mTitle3\" onmouseover=\"mOver('mTitle3')\" onmouseout=\"mOut('mTitle3')\">新建文件</font></a><br>");
write("</div>");
write("<img src=\""+mimgpath+"/I.gif\" align=\"absmiddle\" width=\"19\" height=\"20\" border=\"0\"><img src=\""+mimgpath+"/L.gif\" align=\"absmiddle\" width=\"19\" height=\"20\" border=\"0\"><a target=\"mainFrame\" href=\"main1.htm\" "+mfonts+" title=\"\"><font ID=\"mTitle4\" onmouseover=\"mOver('mTitle4')\" onmouseout=\"mOut('mTitle4')\">新建菜单</font></a><br>");
write("</div>");
write("<img src=\""+mimgpath+"/L.gif\" align=\"absmiddle\" width=\"19\" height=\"20\" border=\"0\"><a target=\"_self\" href=\"#\" "+mfonts+" title=\"\"><font ID=\"mTitle5\" onmouseover=\"mOver('mTitle5')\" onmouseout=\"mOut('mTitle5')\">系统</font></a><br>");
write("</div>");
}
这是用webmenushop做的
调用时只要在相应的页面上写上<script language="javascript" src="menu.js"></script>就可以了，当然还需要“＋”号的图片前面的程序应该放在以menu.js为名字的文件中

Answer 3

http://javascript.internet.com/上面有一些比较好的源码，建议找源码用google，E文网页上资源较多。

Answer 4

巧用CSS制作树状目录 　　索易电子杂志大多采用树状目录，当鼠标点击主目录时，展开子目录；当再次点击主目录时，则关闭子目录。显得简捷明快，朴实无华。制作这种树状目录的方法较多，最近我利用CSS能方便地控制对象的“显 
示”和“隐藏”属性原理，也制作一个，我感到用CSS制作这样的树状 
目录，方法简单，代码也比较少，所以把它写出来，给网友们共亨，以 
便在需要的时候也可动手做一个。先看下面的示例：当用鼠标 
在主目录 
上点一下，就下拉出相应的子目录，再点一下，又恢复原状，其效果与 
索易电子杂志上的目录效果完全一致。 
　　制作方法： 
　　我先把产生这种效果的代码复制如下，然后结合代码讲制作方法： 
〈div id="main1" style="color:blue" onclick="document.all.child1.style.display=(document.all 
.child1.style.display =='none')?'':'none'" 〉 
+ 主目录1〈/div〉 
〈div id="child1" style="display:none"〉 
〈a href="#"〉- 子目录1〈/a〉 〈br〉 
〈a href="#"〉- 子目录2〈/a〉 〈br〉 
〈a href="#"〉- 子目录3〈/a〉 〈br〉 
〈a href="#"〉- 子目录4〈/a〉 
〈/div〉 
〈div id="main2" style="color:blue" onclick="document.all.child2.style.display=(document.all 
.child2.style.display =='none')?'':'none'" 〉 
+ 主目录2 〈/div〉 
〈div id="child2" style="display:none"〉 
〈a href="#"〉- 子目录1〈/a〉 〈br〉 
〈a href="#"〉- 子目录2〈/a〉 〈br〉 
〈a href="#"〉- 子目录3〈/a〉 
〈/div〉 
　　注：“ ”表示一个字符空格 
　　1、先定义两个DIV，一个用于主目录，取名为：main1；另一个用 
于相应的子目录，取名为：child1。　　2、在main1的DIV中写上 
“+ 主目录1”，并在它的上面加载一个鼠标单击事件：onclick 和一 
小段Javascript程序：document.all.child1.style.display=(document.all.child1. 
style.display =='none')?'':'none'。这段程序的作用是，当鼠标 
在main1的DIV上（也就是在“+ 主目录1”上）单击时，如果child1的DIV是隐藏的， 
让它显示；若是显示的，则让它隐藏。 
　　3、在child1的DIV上写上子目录，并把它设置成超级链接，我在 
上面的示例中是设置了空链接，实际制作时把它改为实链接，以让它 
指向链接目标。在child1的DIV定义中加上一个CSS：style="display:none"，其 
目的是使子目录开始时处于隐藏状态。 
　　其它目录的制作只是重复上面的三步而已。按F12就可看到效果了。 
这种方法主要是利用了CSS的显示属性：display，它有一个特点就是 
当对象被隐藏后，对象所占据的页面空间将自动让出。我们知道CSS还 
一个属性：visibility也具有显示和隐藏的对象的功能，但不能用来 
制作上面的树状目录。因为Visibility在隐藏对象后，对象所占据的 
空间并不释放，也就是当隐藏子目录时，子目录的位置只是一片空白 
而已位置并没有让出来，因此另一个主目录也就无法靠拢。所以它只 
能用于那些需要固定页面元素位置的地方。