常用的三种树形菜单(很实用的).doc

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(/effect/images/treemenu/opened1.gif) no-repeat 0 0; #CNLTreeMenu1 .Closed img.s background:url(/effect/images/treemenu/closed1.gif) no-repeat 0 0; #CNLTreeMenu1 .Child img.s background:url(/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(/effect/images/treemenu/opened2.gif) no-repeat 4px 6px; #CNLTreeMenu2 .Closed img.s background:url(/effect/images/treemenu/closed2.gif) no-repeat 3px 6px; #CNLTreeMenu2 .Child img.s background:url(/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(/effect/images/treemenu/opened3.gif) no-repeat 0 1px; #CNLTreeMenu3 .Closed img.s background:url(/effect/images/treemenu/closed3.gif) no-repeat 0 1px; #CNLTreeMenu3 .Child img.s background:url(/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; 无限级树形菜单- java中文网:www.javaweb.cc CNL Tree Menu1 全部展开& lt;/a全部折叠 Zzsky.Cn 技术区 网页技术 JavaScript HTML/XHTML/CSS Ajax 网页制作工具 设计/图形 Flash/多媒体 VML/Web3D Web编程 Java .Net ASP/VBScript PHP Perl/Python Web综合/开源 数据库 Access/SQLServer MySQL/PostgreSQL Oracle/DB2/Sybase 服务器 Windows/IIS Unix/Linux/Apache 应用服务器 二级目录 三级目录 四级目录 五级目录 . 第n级目录 叶结点1 叶结点2 叶结点3 二级目录 三级目录 四级目录 五级目录 . 第n级目录 叶结点1 叶结点2 叶结点3 CNL Tree Menu2 全部展开& lt;/a全部折叠 Zzsky.Cn 技术区 网页技术 JavaScript HTML/XHTML/CSS Ajax 网页制作工具 设计/图形 Flash/多媒体 VML/Web3D Web编程 Java .Net ASP/VBScript PHP Perl/Python Web综合/开源 数据库 Access/SQLServer MySQL/PostgreSQL Oracle/DB2/Sybase 服务器 Windows/IIS Unix/Linux/Apache 应用服务器 二级目录 三级目录 四级目录 五级目录 . 第n级目录 叶结点1 叶结点2 叶结点3 二级目录 三级目录 四级目录 五级目录 . 第n级目录 叶结点1 叶结点2 叶结点3 CNL Tree Menu3 全部展开& lt;/a全部折叠 Zzsky.Cn 技术区 网页技术 JavaScript HTML/XHTML/CSS Ajax 网页制作工具 设计/图形 Flash/多媒体 VML/Web3D Web编程 Java .Net ASP/VBScript PHP Perl/Python Web综合/开源 数据库 Access/SQLServer MySQL/PostgreSQL Oracle/DB2/Sybase 服务器 Windows/IIS Unix/Linux/Apache 应用服务器 二级目录 三级目录 四级目录 五级目录 . 第n级目录 叶结点1 叶结点2 叶结点3 二级目录 三级目录 四级目录 五级目录 . 第n级目录 叶结点1 叶结点2 叶结点3 !- 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;in;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 | /effect/images/treemenu/s.gif; this.ImgBlankA =; this.ImgBlankB =; for (i=0;ithis.AllNodes.length;i+ ) this.AllNodesi.className=?this.AllNodesi.className=ClassName1