常用的三种树形菜单->很实用的
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<style type="text/css">
a { text-decoration:none; }
a, a:visited { color:#000; background:inherit; }
body { margin:0; padding:20px; font:12px tahoma, 宋体, sans-serif; }
dt { font-size:22px; font-weight:bold; margin:0 0 0 15px; }
dd { margin:0 0 0 15px; }
h4 { margin:0; padding:0; font-size:18px; text-align:center; }
p { margin:0; padding:0 0 0 18px; }
p a, p a:visited { color:#00f; background:inherit; }
/*CNLTreeMenu Start*/
.CNLTreeMenu img.s { cursor:pointer; vertical-align:middle; }
.CNLTreeMenu ul { padding:0; }
.CNLTreeMenu li { list-style:none; padding:0; }
.Closed ul { display:none; }
.Child img.s { background:none; cursor:default; }
#CNLTreeMenu1 ul { margin:0 0 0 17px; }
#CNLTreeMenu1 img.s { width:20px; height:15px; }
#CNLTreeMenu1 .Opened img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/opened1.gif) no-repeat 0 0; }
#CNLTreeMenu1 .Closed img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/closed1.gif) no-repeat 0 0; }
#CNLTreeMenu1 .Child img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/child1.gif) no-repeat 3px 5px; }
#CNLTreeMenu2 ul { margin:0 0 0 17px; }
#CNLTreeMenu2 img.s { width:17px; height:15px; }
#CNLTreeMenu2 .Opened img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/opened2.gif) no-repeat 4px 6px; }
#CNLTreeMenu2 .Closed img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/closed2.gif) no-repeat 3px 6px; }
#CNLTreeMenu2 .Child img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/child2.gif) no-repeat 3px 5px; }
#CNLTreeMenu3 ul { margin:0 0 0 17px; }
#CNLTreeMenu3 img.s { width:34px; height:18px; }
#CNLTreeMenu3 .Opened img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/opened3.gif) no-repeat 0 1px; }
#CNLTreeMenu3 .Closed img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/closed3.gif) no-repeat 0 1px; }
#CNLTreeMenu3 .Child img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/child3.gif) no-repeat 13px 2px; }
/*CNLTreeMenu End*/
/*Temp CSS for View Demo*/
#CNLTreeMenu1, #CNLTreeMenu2, #CNLTreeMenu3 { float:left; width:249px; border:1px solid #99BEEF; background:#D2E4FC; color:inherit; margin:3px; padding:3px; }
#CNLTreeMenu1, #CNLTreeMenu2 { padding-bottom:15px; }
.ViewCode { clear:both; border:1px solid #FFB900; background:#FFFFCC; color:inherit; margin:3px; padding:3px; }
.ViewCode h6 { color:#00f; }
</style>
<title>无限级树形菜单- java中文网:www.javaweb.cc</title>
</head>
<body>
<div class="CNLTreeMenu" id="CNLTreeMenu1">
<h4>CNL Tree Menu1</h4>
<p><a id="AllOpen_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');">全部展开</a><a id="AllClose_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');" style="display:none;">全部折叠</a></p>
<ul>
<li class="Opened"><a href="http://www.zzsky.cn">Zzsky.Cn</a>
<ul>
<li><a href="#1">技术区</a>
<ul>
<li><a href="#">网页技术</a>
<ul>
<li class="Child"><a href="#">JavaScript</a></li>
<!--Child Node-->
<li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
<li class="Child"><a href="#">Ajax</a></li>
<li class="Child"><a href="#">网页制作工具</a></li>
<li class="Child"><a href="#">设计/图形</a></li>
<li class="Child"><a href="#">Flash/多媒体</a></li>
<li class="Child"><a href="#">VML/Web3D</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">Web编程</a>
<ul>
<li class="Child"><a href="#">Java</a></li>
<!--Child Node-->
<li class="Child"><a href="#">.Net</a></li>
<li class="Child"><a href="#">ASP/VBScript</a></li>
<li class="Child"><a href="#">PHP</a></li>
<li class="Child"><a href="#">Perl/Python</a></li>
<li class="Child"><a href="#">Web综合/开源</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">数据库</a>
<ul>
<li class="Child"><a href="#">Access/SQLServer</a></li>
<!--Child Node-->
<li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
<li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">服务器</a>
<ul>
<li class="Child"><a href="#">Windows/IIS</a></li>
<!--Child Node-->
<li class="Child"><a href="#">Unix/Linux/Apache</a></li>
<li class="Child"><a href="#">应用服务器</a></li>
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
</ul>
</li>
<!--Sub Node 1 -->
</ul>
</div>
<!-- CNLTreeMenu -->
<!--CNLTreeMenu1 End!-->
<!--CNLTreeMenu2 Start:-->
<div class="CNLTreeMenu" id="CNLTreeMenu2">
<h4>CNL Tree Menu2</h4>
<p><a id="AllOpen_2" href="#" onClick="MyCNLTreeMenu2.SetNodes(0);Hd(this);Sw('AllClose_2');">全部展开</a><a id="AllClose_2" href="#" onClick="MyCNLTreeMenu2.SetNodes(1);Hd(this);Sw('AllOpen_2');" style="display:none;">全部折叠</a></p>
<ul>
<li class="Opened"><a href="http://www.zzsky.cn">Zzsky.Cn</a>
<ul>
<li><a href="#1">技术区</a>
<ul>
<li><a href="#">网页技术</a>
<ul>
<li class="Child"><a href="#">JavaScript</a></li>
<!--Child Node-->
<li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
<li class="Child"><a href="#">Ajax</a></li>
<li class="Child"><a href="#">网页制作工具</a></li>
<li class="Child"><a href="#">设计/图形</a></li>
<li class="Child"><a href="#">Flash/多媒体</a></li>
<li class="Child"><a href="#">VML/Web3D</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">Web编程</a>
<ul>
<li class="Child"><a href="#">Java</a></li>
<!--Child Node-->
<li class="Child"><a href="#">.Net</a></li>
<li class="Child"><a href="#">ASP/VBScript</a></li>
<li class="Child"><a href="#">PHP</a></li>
<li class="Child"><a href="#">Perl/Python</a></li>
<li class="Child"><a href="#">Web综合/开源</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">数据库</a>
<ul>
<li class="Child"><a href="#">Access/SQLServer</a></li>
<!--Child Node-->
<li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
<li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">服务器</a>
<ul>
<li class="Child"><a href="#">Windows/IIS</a></li>
<!--Child Node-->
<li class="Child"><a href="#">Unix/Linux/Apache</a></li>
<li class="Child"><a href="#">应用服务器</a></li>
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
</ul>
</li>
<!--Sub Node 1 -->
</ul>
</div>
<!-- CNLTreeMenu -->
<!--CNLTreeMenu2 End-->
<!--CNLTreeMenu3 Start:-->
<div class="CNLTreeMenu" id="CNLTreeMenu3">
<h4>CNL Tree Menu3</h4>
<p><a id="AllOpen_3" href="#" onClick="MyCNLTreeMenu3.SetNodes(0);Hd(this);Sw('AllClose_3');">全部展开</a><a id="AllClose_3" href="#" onClick="MyCNLTreeMenu3.SetNodes(1);Hd(this);Sw('AllOpen_3');" style="display:none;">全部折叠</a></p>
<ul>
<li class="Opened"><a href="http://www.zzsky.cn">Zzsky.Cn</a>
<ul>
<li><a href="#1">技术区</a>
<ul>
<li><a href="#">网页技术</a>
<ul>
<li class="Child"><a href="#">JavaScript</a></li>
<!--Child Node-->
<li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
<li class="Child"><a href="#">Ajax</a></li>
<li class="Child"><a href="#">网页制作工具</a></li>
<li class="Child"><a href="#">设计/图形</a></li>
<li class="Child"><a href="#">Flash/多媒体</a></li>
<li class="Child"><a href="#">VML/Web3D</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">Web编程</a>
<ul>
<li class="Child"><a href="#">Java</a></li>
<!--Child Node-->
<li class="Child"><a href="#">.Net</a></li>
<li class="Child"><a href="#">ASP/VBScript</a></li>
<li class="Child"><a href="#">PHP</a></li>
<li class="Child"><a href="#">Perl/Python</a></li>
<li class="Child"><a href="#">Web综合/开源</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">数据库</a>
<ul>
<li class="Child"><a href="#">Access/SQLServer</a></li>
<!--Child Node-->
<li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
<li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">服务器</a>
<ul>
<li class="Child"><a href="#">Windows/IIS</a></li>
<!--Child Node-->
<li class="Child"><a href="#">Unix/Linux/Apache</a></li>
<li class="Child"><a href="#">应用服务器</a></li>
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
</ul>
</li>
<!--Sub Node 1 -->
</ul>
</div>
<script type="text/javascript">
<!--
function Ob(o){
var o = document.getElementById(o) ? document.getElementById(o) : o;
return o;
}
function Hd(o){
Ob(o).style.display = "none";
}
function Sw(o){
Ob(o).style.display = "";
}
function ExCls(o, a, b, n){
var o = Ob(o);
for (i = 0; i < n; i++) {
o = o.parentNode;
}
o.className = o.className == a ? b : a;
}
function CNLTreeMenu(id, TagName0){
this.id = id;
this.TagName0 = TagName0 == "" ? "li" : TagName0;
this.AllNodes = Ob(this.id).getElementsByTagName(TagName0);
this.InitCss = function(ClassName0, ClassName1, ClassName2, ImgUrl){
this.ClassName0 = ClassName0;
this.ClassName1 = ClassName1;
this.ClassName2 = ClassName2;
this.ImgUrl = ImgUrl || "http://www.zzsky.cn/effect/images/treemenu/s.gif";
this.ImgBlankA = "<img src=\"" + this.ImgUrl + "\" class=\"s\" onclick=\"ExCls(this,'" + ClassName0 + "','" + ClassName1 + "',1);\" alt=\"展开/折叠\" />";
this.ImgBlankB = "<img src=\"" + this.ImgUrl + "\" class=\"s\" />";
for (i = 0; i < this.AllNodes.length; i++) {
this.AllNodes[i].className == "" ? this.AllNodes[i].className = ClassName1 : "";
this.AllNodes[i].innerHTML = (this.AllNodes[i].className == ClassName2 ? this.ImgBlankB : this.ImgBlankA) + this.AllNodes[i].innerHTML;
}
}
this.SetNodes = function(n){
var sClsName = n == 0 ? this.ClassName0 : this.ClassName1;
for (i = 0; i < this.AllNodes.length; i++) {
this.AllNodes[i].className == this.ClassName2 ? "" : this.AllNodes[i].className = sClsName;
}
}
}
var MyCNLTreeMenu1 = new CNLTreeMenu("CNLTreeMenu1", "li");
MyCNLTreeMenu1.InitCss("Opened", "Closed", "Child", "http://www.zzsky.cn/effect/images/treemenu/s.gif");
var MyCNLTreeMenu2 = new CNLTreeMenu("CNLTreeMenu2", "li");
MyCNLTreeMenu2.InitCss("Opened", "Closed", "Child", "http://www.zzsky.cn/effect/images/treemenu/s.gif");
var MyCNLTreeMenu3 = new CNLTreeMenu("CNLTreeMenu3", "li");
MyCNLTreeMenu3.InitCss("Opened", "Closed", "Child", "http://www.zzsky.cn/effect/images/treemenu/s.gif");
-->
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<style type="text/css">
a { text-decoration:none; }
a, a:visited { color:#000; background:inherit; }
body { margin:0; padding:20px; font:12px tahoma, 宋体, sans-serif; }
dt { font-size:22px; font-weight:bold; margin:0 0 0 15px; }
dd { margin:0 0 0 15px; }
h4 { margin:0; padding:0; font-size:18px; text-align:center; }
p { margin:0; padding:0 0 0 18px; }
p a, p a:visited { color:#00f; background:inherit; }
/*CNLTreeMenu Start*/
.CNLTreeMenu img.s { cursor:pointer; vertical-align:middle; }
.CNLTreeMenu ul { padding:0; }
.CNLTreeMenu li { list-style:none; padding:0; }
.Closed ul { display:none; }
.Child img.s { background:none; cursor:default; }
#CNLTreeMenu1 ul { margin:0 0 0 17px; }
#CNLTreeMenu1 img.s { width:20px; height:15px; }
#CNLTreeMenu1 .Opened img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/opened1.gif) no-repeat 0 0; }
#CNLTreeMenu1 .Closed img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/closed1.gif) no-repeat 0 0; }
#CNLTreeMenu1 .Child img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/child1.gif) no-repeat 3px 5px; }
#CNLTreeMenu2 ul { margin:0 0 0 17px; }
#CNLTreeMenu2 img.s { width:17px; height:15px; }
#CNLTreeMenu2 .Opened img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/opened2.gif) no-repeat 4px 6px; }
#CNLTreeMenu2 .Closed img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/closed2.gif) no-repeat 3px 6px; }
#CNLTreeMenu2 .Child img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/child2.gif) no-repeat 3px 5px; }
#CNLTreeMenu3 ul { margin:0 0 0 17px; }
#CNLTreeMenu3 img.s { width:34px; height:18px; }
#CNLTreeMenu3 .Opened img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/opened3.gif) no-repeat 0 1px; }
#CNLTreeMenu3 .Closed img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/closed3.gif) no-repeat 0 1px; }
#CNLTreeMenu3 .Child img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/child3.gif) no-repeat 13px 2px; }
/*CNLTreeMenu End*/
/*Temp CSS for View Demo*/
#CNLTreeMenu1, #CNLTreeMenu2, #CNLTreeMenu3 { float:left; width:249px; border:1px solid #99BEEF; background:#D2E4FC; color:inherit; margin:3px; padding:3px; }
#CNLTreeMenu1, #CNLTreeMenu2 { padding-bottom:15px; }
.ViewCode { clear:both; border:1px solid #FFB900; background:#FFFFCC; color:inherit; margin:3px; padding:3px; }
.ViewCode h6 { color:#00f; }
</style>
<title>无限级树形菜单- java中文网:www.javaweb.cc</title>
</head>
<body>
<div class="CNLTreeMenu" id="CNLTreeMenu1">
<h4>CNL Tree Menu1</h4>
<p><a id="AllOpen_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');">全部展开</a><a id="AllClose_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');" style="display:none;">全部折叠</a></p>
<ul>
<li class="Opened"><a href="http://www.zzsky.cn">Zzsky.Cn</a>
<ul>
<li><a href="#1">技术区</a>
<ul>
<li><a href="#">网页技术</a>
<ul>
<li class="Child"><a href="#">JavaScript</a></li>
<!--Child Node-->
<li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
<li class="Child"><a href="#">Ajax</a></li>
<li class="Child"><a href="#">网页制作工具</a></li>
<li class="Child"><a href="#">设计/图形</a></li>
<li class="Child"><a href="#">Flash/多媒体</a></li>
<li class="Child"><a href="#">VML/Web3D</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">Web编程</a>
<ul>
<li class="Child"><a href="#">Java</a></li>
<!--Child Node-->
<li class="Child"><a href="#">.Net</a></li>
<li class="Child"><a href="#">ASP/VBScript</a></li>
<li class="Child"><a href="#">PHP</a></li>
<li class="Child"><a href="#">Perl/Python</a></li>
<li class="Child"><a href="#">Web综合/开源</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">数据库</a>
<ul>
<li class="Child"><a href="#">Access/SQLServer</a></li>
<!--Child Node-->
<li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
<li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">服务器</a>
<ul>
<li class="Child"><a href="#">Windows/IIS</a></li>
<!--Child Node-->
<li class="Child"><a href="#">Unix/Linux/Apache</a></li>
<li class="Child"><a href="#">应用服务器</a></li>
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
</ul>
</li>
<!--Sub Node 1 -->
</ul>
</div>
<!-- CNLTreeMenu -->
<!--CNLTreeMenu1 End!-->
<!--CNLTreeMenu2 Start:-->
<div class="CNLTreeMenu" id="CNLTreeMenu2">
<h4>CNL Tree Menu2</h4>
<p><a id="AllOpen_2" href="#" onClick="MyCNLTreeMenu2.SetNodes(0);Hd(this);Sw('AllClose_2');">全部展开</a><a id="AllClose_2" href="#" onClick="MyCNLTreeMenu2.SetNodes(1);Hd(this);Sw('AllOpen_2');" style="display:none;">全部折叠</a></p>
<ul>
<li class="Opened"><a href="http://www.zzsky.cn">Zzsky.Cn</a>
<ul>
<li><a href="#1">技术区</a>
<ul>
<li><a href="#">网页技术</a>
<ul>
<li class="Child"><a href="#">JavaScript</a></li>
<!--Child Node-->
<li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
<li class="Child"><a href="#">Ajax</a></li>
<li class="Child"><a href="#">网页制作工具</a></li>
<li class="Child"><a href="#">设计/图形</a></li>
<li class="Child"><a href="#">Flash/多媒体</a></li>
<li class="Child"><a href="#">VML/Web3D</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">Web编程</a>
<ul>
<li class="Child"><a href="#">Java</a></li>
<!--Child Node-->
<li class="Child"><a href="#">.Net</a></li>
<li class="Child"><a href="#">ASP/VBScript</a></li>
<li class="Child"><a href="#">PHP</a></li>
<li class="Child"><a href="#">Perl/Python</a></li>
<li class="Child"><a href="#">Web综合/开源</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">数据库</a>
<ul>
<li class="Child"><a href="#">Access/SQLServer</a></li>
<!--Child Node-->
<li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
<li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">服务器</a>
<ul>
<li class="Child"><a href="#">Windows/IIS</a></li>
<!--Child Node-->
<li class="Child"><a href="#">Unix/Linux/Apache</a></li>
<li class="Child"><a href="#">应用服务器</a></li>
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
</ul>
</li>
<!--Sub Node 1 -->
</ul>
</div>
<!-- CNLTreeMenu -->
<!--CNLTreeMenu2 End-->
<!--CNLTreeMenu3 Start:-->
<div class="CNLTreeMenu" id="CNLTreeMenu3">
<h4>CNL Tree Menu3</h4>
<p><a id="AllOpen_3" href="#" onClick="MyCNLTreeMenu3.SetNodes(0);Hd(this);Sw('AllClose_3');">全部展开</a><a id="AllClose_3" href="#" onClick="MyCNLTreeMenu3.SetNodes(1);Hd(this);Sw('AllOpen_3');" style="display:none;">全部折叠</a></p>
<ul>
<li class="Opened"><a href="http://www.zzsky.cn">Zzsky.Cn</a>
<ul>
<li><a href="#1">技术区</a>
<ul>
<li><a href="#">网页技术</a>
<ul>
<li class="Child"><a href="#">JavaScript</a></li>
<!--Child Node-->
<li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
<li class="Child"><a href="#">Ajax</a></li>
<li class="Child"><a href="#">网页制作工具</a></li>
<li class="Child"><a href="#">设计/图形</a></li>
<li class="Child"><a href="#">Flash/多媒体</a></li>
<li class="Child"><a href="#">VML/Web3D</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">Web编程</a>
<ul>
<li class="Child"><a href="#">Java</a></li>
<!--Child Node-->
<li class="Child"><a href="#">.Net</a></li>
<li class="Child"><a href="#">ASP/VBScript</a></li>
<li class="Child"><a href="#">PHP</a></li>
<li class="Child"><a href="#">Perl/Python</a></li>
<li class="Child"><a href="#">Web综合/开源</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">数据库</a>
<ul>
<li class="Child"><a href="#">Access/SQLServer</a></li>
<!--Child Node-->
<li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
<li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">服务器</a>
<ul>
<li class="Child"><a href="#">Windows/IIS</a></li>
<!--Child Node-->
<li class="Child"><a href="#">Unix/Linux/Apache</a></li>
<li class="Child"><a href="#">应用服务器</a></li>
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
</ul>
</li>
<!--Sub Node 1 -->
</ul>
</div>
<script type="text/javascript">
<!--
function Ob(o){
var o = document.getElementById(o) ? document.getElementById(o) : o;
return o;
}
function Hd(o){
Ob(o).style.display = "none";
}
function Sw(o){
Ob(o).style.display = "";
}
function ExCls(o, a, b, n){
var o = Ob(o);
for (i = 0; i < n; i++) {
o = o.parentNode;
}
o.className = o.className == a ? b : a;
}
function CNLTreeMenu(id, TagName0){
this.id = id;
this.TagName0 = TagName0 == "" ? "li" : TagName0;
this.AllNodes = Ob(this.id).getElementsByTagName(TagName0);
this.InitCss = function(ClassName0, ClassName1, ClassName2, ImgUrl){
this.ClassName0 = ClassName0;
this.ClassName1 = ClassName1;
this.ClassName2 = ClassName2;
this.ImgUrl = ImgUrl || "http://www.zzsky.cn/effect/images/treemenu/s.gif";
this.ImgBlankA = "<img src=\"" + this.ImgUrl + "\" class=\"s\" onclick=\"ExCls(this,'" + ClassName0 + "','" + ClassName1 + "',1);\" alt=\"展开/折叠\" />";
this.ImgBlankB = "<img src=\"" + this.ImgUrl + "\" class=\"s\" />";
for (i = 0; i < this.AllNodes.length; i++) {
this.AllNodes[i].className == "" ? this.AllNodes[i].className = ClassName1 : "";
this.AllNodes[i].innerHTML = (this.AllNodes[i].className == ClassName2 ? this.ImgBlankB : this.ImgBlankA) + this.AllNodes[i].innerHTML;
}
}
this.SetNodes = function(n){
var sClsName = n == 0 ? this.ClassName0 : this.ClassName1;
for (i = 0; i < this.AllNodes.length; i++) {
this.AllNodes[i].className == this.ClassName2 ? "" : this.AllNodes[i].className = sClsName;
}
}
}
var MyCNLTreeMenu1 = new CNLTreeMenu("CNLTreeMenu1", "li");
MyCNLTreeMenu1.InitCss("Opened", "Closed", "Child", "http://www.zzsky.cn/effect/images/treemenu/s.gif");
var MyCNLTreeMenu2 = new CNLTreeMenu("CNLTreeMenu2", "li");
MyCNLTreeMenu2.InitCss("Opened", "Closed", "Child", "http://www.zzsky.cn/effect/images/treemenu/s.gif");
var MyCNLTreeMenu3 = new CNLTreeMenu("CNLTreeMenu3", "li");
MyCNLTreeMenu3.InitCss("Opened", "Closed", "Child", "http://www.zzsky.cn/effect/images/treemenu/s.gif");
-->
</script>
</body>
</html>