无限级CSS树形菜单代码

 

无限级 CSS 树形菜单代码

枫岩 ,www.cnlei.net" />
树形菜单 ,CNLei" />

实例演示：

 

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 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 =" 
   展开 
   / 
   折叠 
   /" />";
  this.ImgBlankA+=
  this.ImgBlankB ="";
  for (i=0;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[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName;
  }
 }
}

HTML Code ：

 
   点击右键就可查看 
   ^_^