无限级树形菜单

实例演示：

 

CNL Tree Menu Ver1.02

 

Author：CNLei,枫岩

 

MySite：www.cnlei.net

 

E-Mail：cnlei.y.l#gail.com (请将#换成@)

 

Intro：
 

   
1. "CNL Tree Menu"为无限级树形，兼容以下版本的浏览器：IE5.0+, FF1.06+, Opera8.5+ ……

   
2. HTML,CSS,JavaScript代码相互分离(即数据，风格，脚本三者分离)，可应用于多种场合，易于维护修改；更换树形图标，只需要修改CSS文件.

   
3. 通过W3C校验(XHtml1-Strict,CSS1.0).

   
4. 最后更新：2006-2-13

 

 

CNL Tree Menu1

全部展开全部折叠

 
• IECN.Net
   
  
     
  • 技术区
      
    
          
    • 网页技术
          
      
           
      • 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

全部展开全部折叠

 
• IECN.Net
   
  
     
  • 技术区
      
    
          
    • 网页技术
          
      
           
      • 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

全部展开全部折叠

 
• IECN.Net
   
  
     
  • 技术区
      
    
          
    • 网页技术
          
      
           
      • 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
              
                             
            
                         
          
                     
        
                 
      
             
    
        
  
   

CSS Code：

.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(skin1/opened.gif) no-repeat 0 0;}
#CNLTreeMenu1 .Closed img.s {background:url(skin1/closed.gif) no-repeat 0 0;}
#CNLTreeMenu1 .Child img.s {background:url(skin1/child.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(skin2/opened.gif) no-repeat 4px 6px;}
#CNLTreeMenu2 .Closed img.s {background:url(skin2/closed.gif) no-repeat 3px 6px;}
#CNLTreeMenu2 .Child img.s {background:url(skin2/child.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(skin3/opened.gif) no-repeat 0 1px;}
#CNLTreeMenu3 .Closed img.s {background:url(skin3/closed.gif) no-repeat 0 1px;}
#CNLTreeMenu3 .Child img.s {background:url(skin3/child.gif) no-repeat 13px 2px;}

JavaScript Code：

/*****************************
JavaScript Code for CNLTreeMenu
Version: Ver 1.02
Author : CNLei, 枫岩
E-Mail : [email protected]
MySite : http://www.cnlei.net
Passed : XHtml 1.0, CSS 2.0, IE5.0+, FF1.0+, Opera8.5+
Update : 2006-2-12
*****************************/
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) {
  this.ClassName0=ClassName0;
  this.ClassName1=ClassName1;
  this.ClassName2=ClassName2;
  this.ImgBlankA ="<img src=/"css/s.gif/" class=/"s/" οnclick=/"ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);/" alt=/"展开/折叠/" />";
  this.ImgBlankA+=
  this.ImgBlankB ="<img src=/"css/s.gif/" 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;
  }
 }
}

HTML Code：

点击右键就可查看^_^