非常好用的的三种树形菜单代码

《黑手党2》好使的修改器V1.01 免费版种类：修改器大小：144KB语言：中文 评分：7.0标签：立即下载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 no-repeat 0 0;}

#CNLTreeMenu1 .Closed img.s {background:url no-repeat 0 0;}

#CNLTreeMenu1 .Child img.s {background:url no-repeat 3px 5px;}

#CNLTreeMenu2 ul {margin:0 0 0 17px;}

#CNLTreeMenu2 img.s {width:17px;height:15px;}

#CNLTreeMenu2 .Opened img.s {background:url no-repeat 4px 6px;}

#CNLTreeMenu2 .Closed img.s {background:url no-repeat 3px 6px;}

#CNLTreeMenu2 .Child img.s {background:url no-repeat 3px 5px;}

#CNLTreeMenu3 ul {margin:0 0 0 17px;}

#CNLTreeMenu3 img.s {width:34px;height:18px;}

#CNLTreeMenu3 .Opened img.s {background:url no-repeat 0 1px;}

#CNLTreeMenu3 .Closed img.s {background:url no-repeat 0 1px;}

#CNLTreeMenu3 .Child img.s {background:url 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 id="CNLTreeMenu1"

h4CNL Tree Menu1/h4

pa id="AllOpen_1" href="#" onClick="MyCNLTreeMenu1.SetNodes;Hd;Sw;"全部展开/aa id="AllClose_1" href="#" onClick="MyCNLTreeMenu1.SetNodes;Hd;Sw;"全部折叠/a/p

ul

lia href="http://www.zzsky.cn"Zzsky.Cn/a

ul

lia href="#1"技术区/a

ul

lia href="#"网页技术/a

ul

lia href="#"JavaScript/a/li

!--Child Node--

lia href="#"HTML/XHTML/CSS/a/li

lia href="#"Ajax/a/li

lia href="#"网站设计工具/a/li

lia href="#"设计/图形/a/li

lia href="#"Flash/多媒体/a/li

lia href="#"VML/Web3D/a/li

/ul

/li

!--Sub Node 3--

lia href="#"Web编程/a

ul

lia href="#"Java/a/li

!--Child Node--

lia href="#".Net/a/li

lia href="#"ASP/VBScript/a/li

lia href="#"PHP/a/li

lia href="#"Perl/Python/a/li

lia href="#"Web综合/开源/a/li

/ul

/li

!--Sub Node 3--

lia href="#"数据库/a

ul

lia href="#"Access/SQLServer/a/li

!--Child Node--

lia href="#"MySQL/PostgreSQL/a/li

lia href="#"Oracle/DB2/Sybase/a/li

/ul

/li

!--Sub Node 3--

lia href="#"服务器/a

ul

lia href="#"Windows/IIS/a/li

!--Child Node--

lia href="#"Unix/Linux/Apache/a/li

lia href="#"应用服务器/a/li

/ul

/li

!--Sub Node 3--

/ul

/li

!--Sub Node 2--

lia href="#1"二级目录/a

ul

lia href="#"三级目录/a

ul

lia href="#"四级目录/a

ul

lia href="#"五级目录/a

ul

lia href="#"....../a

ul

lia href="#"第n级目录/a

ul

lia href="#"叶结点1/a/li

!--Child Node--

lia href="#"叶结点2/a/li

lia 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--

lia href="#1"二级目录/a

ul

lia href="#"三级目录/a

ul

lia href="#"四级目录/a

ul

lia href="#"五级目录/a

ul

lia href="#"....../a

ul

lia href="#"第n级目录/a

ul

lia href="#"叶结点1/a/li

!--Child Node--

lia href="#"叶结点2/a/li

lia 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 id="CNLTreeMenu2"

h4CNL Tree Menu2/h4

pa id="AllOpen_2" href="#" onClick="MyCNLTreeMenu2.SetNodes;Hd;Sw;"全部展开/aa id="AllClose_2" href="#" onClick="MyCNLTreeMenu2.SetNodes;Hd;Sw;"全部折叠/a/p

ul

lia href="http://www.zzsky.cn"Zzsky.Cn/a

ul

lia href="#1"技术区/a

ul

lia href="#"网页技术/a

ul

lia href="#"JavaScript/a/li

!--Child Node--

lia href="#"HTML/XHTML/CSS/a/li

lia href="#"Ajax/a/li

lia href="#"网站设计工具/a/li

lia href="#"设计/图形/a/li

lia href="#"Flash/多媒体/a/li

lia href="#"VML/Web3D/a/li

/ul

/li

!--Sub Node 3--

lia href="#"Web编程/a

ul

lia href="#"Java/a/li

!--Child Node--

lia href="#".Net/a/li

lia href="#"ASP/VBScript/a/li

lia href="#"PHP/a/li

lia href="#"Perl/Python/a/li

lia href="#"Web综合/开源/a/li

/ul

/li

!--Sub Node 3--

lia href="#"数据库/a

ul

lia href="#"Access/SQLServer/a/li

!--Child Node--

lia href="#"MySQL/PostgreSQL/a/li

lia href="#"Oracle/DB2/Sybase/a/li

/ul

/li

!--Sub Node 3--

lia href="#"服务器/a

ul

lia href="#"Windows/IIS/a/li

!--Child Node--

lia href="#"Unix/Linux/Apache/a/li

lia href="#"应用服务器/a/li

/ul

/li

!--Sub Node 3--

/ul

/li

!--Sub Node 2--

lia href="#1"二级目录/a

ul

lia href="#"三级目录/a

ul

lia href="#"四级目录/a

ul

lia href="#"五级目录/a

ul

lia href="#"....../a

ul

lia href="#"第n级目录/a

ul

lia href="#"叶结点1/a/li

!--Child Node--

lia href="#"叶结点2/a/li

lia 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--

lia href="#1"二级目录/a

ul

lia href="#"三级目录/a

ul

lia href="#"四级目录/a

ul

lia href="#"五级目录/a

ul

lia href="#"....../a

ul

lia href="#"第n级目录/a

ul

lia href="#"叶结点1/a/li

!--Child Node--

lia href="#"叶结点2/a/li

lia 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 id="CNLTreeMenu3"

h4CNL Tree Menu3/h4

pa id="AllOpen_3" href="#" onClick="MyCNLTreeMenu3.SetNodes;Hd;Sw;"全部展开/aa id="AllClose_3" href="#" onClick="MyCNLTreeMenu3.SetNodes;Hd;Sw;"全部折叠/a/p

ul

lia href="http://www.zzsky.cn"Zzsky.Cn/a

ul

lia href="#1"技术区/a

ul

lia href="#"网页技术/a

ul

lia href="#"JavaScript/a/li

!--Child Node--

lia href="#"HTML/XHTML/CSS/a/li

lia href="#"Ajax/a/li

lia href="#"网站设计工具/a/li

lia href="#"设计/图形/a/li

lia href="#"Flash/多媒体/a/li

lia href="#"VML/Web3D/a/li

/ul

/li

!--Sub Node 3--

lia href="#"Web编程/a

ul

lia href="#"Java/a/li

!--Child Node--

lia href="#".Net/a/li

lia href="#"ASP/VBScript/a/li

lia href="#"PHP/a/li

lia href="#"Perl/Python/a/li

lia href="#"Web综合/开源/a/li

/ul

/li

!--Sub Node 3--

lia href="#"数据库/a

ul

lia href="#"Access/SQLServer/a/li

!--Child Node--

lia href="#"MySQL/PostgreSQL/a/li

lia href="#"Oracle/DB2/Sybase/a/li

/ul

/li

!--Sub Node 3--

lia href="#"服务器/a

ul

lia href="#"Windows/IIS/a/li

!--Child Node--

lia href="#"Unix/Linux/Apache/a/li

lia href="#"应用服务器/a/li

/ul

/li

!--Sub Node 3--

/ul

/li

!--Sub Node 2--

lia href="#1"二级目录/a

ul

lia href="#"三级目录/a

ul

lia href="#"四级目录/a

ul

lia href="#"五级目录/a

ul

lia href="#"....../a

ul

lia href="#"第n级目录/a

ul

lia href="#"叶结点1/a/li

!--Child Node--

lia href="#"叶结点2/a/li

lia 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--

lia href="#1"二级目录/a

ul

lia href="#"三级目录/a

ul

lia href="#"四级目录/a

ul

lia href="#"五级目录/a

ul

lia href="#"....../a

ul

lia href="#"第n级目录/a

ul

lia href="#"叶结点1/a/li

!--Child Node--

lia href="#"叶结点2/a/li

lia 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{

var o=document.getElementById?document.getElementById:o;

return o;

}

function Hd {

Ob.style.display="none";

}

function Sw {

Ob.style.display="";

}

function ExCls{

var o=Ob;

for {o=o.parentNode;}

o.className=o.className==a?b:a;

}

function CNLTreeMenu {

this.id=id;

this.TagName0=TagName0==""?"li":TagName0;

this.AllNodes = Ob.getElementsByTagName;

this.InitCss = function {

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;\" alt=\"展开/折叠\" /";

this.ImgBlankB ="img src=\""+this.ImgUrl+"\" class=\"s\" /";

for {

this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:"";

this.AllNodes[i].innerHTML=+this.AllNodes[i].innerHTML;

}

}

this.SetNodes = function {

var sClsName=n==0?this.ClassName0:this.ClassName1;

for {

this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName;

}

}

}

var MyCNLTreeMenu1=new CNLTreeMenu;

MyCNLTreeMenu1.InitCss;

var MyCNLTreeMenu2=new CNLTreeMenu;

MyCNLTreeMenu2.InitCss;

var MyCNLTreeMenu3=new CNLTreeMenu;

MyCNLTreeMenu3.InitCss;

--

/script

TAG标签：树形菜单(1)div(1)

转载请说明来源于当下软件园（https://www.gpsdan.com）

本文地址：https://www.gpsdan.com/news/253.html

郑重声明：文章来源于网络作为参考，本站仅用于分享不存储任何下载资源,如果网站中图片和文字侵犯了您的版权，请联系我们处理！邮箱3450399331@qq.com