1.menu表数据

2.在后台生成html内容后，前台利用nav-h.css生成menu导航条，利用Jquery的treeview插件生成menu树

前台coding:

后台coding:

protected void Page_Load(object sender, EventArgs e)        {            if (!IsPostBack)            {                string menuHtml = string.Empty;                menuHtml = BuildMenuWithRoot(null, string.Empty, "Tree");                tree.InnerHtml = menuHtml;                menuHtml = BuildMenuWithRoot(null, string.Empty, "Menu");                menu.InnerHtml = menuHtml;            }        }        public string BuildMenuWithRoot(int? parentId, string str, string type)        {            IEnumerable
    
      menus = GetMenuByParentId(parentId);            foreach (menu m in menus)            {                try                {                    str += "
     
" + m.Description + "";                    str += BuildMenuWithRoot(m.Id, string.Empty, type);                    str += "
";                }                catch                {                }            }            string idstr = string.Empty;            if (type == "Menu") idstr = " id=\"nav\"";            else if (type == "Tree") idstr = " id=\"menuTree\"";            if (menus.Count() > 0) str = "
     
      " + str+"";            return str;        }        public IEnumerable
      
        GetMenuByParentId(int? parentId)        {            WorkPermitDataContext db = new WorkPermitDataContext();            var query = from m in db.menus                        where (parentId != null && m.ParentId == parentId) || (parentId == null && m.ParentId == null)                        orderby m.OrderNumber                        select m;            return query.AsEnumerable();        }
      
     
    

生成的menu树html:

    
  
     
Home    
      
      
       
Menu1        
        
          
         
Menu1.1 
          
 
           
Menu1.1.1
 
           
Menu1.1.2
 
          
 
          
         
Menu1.2
          
         
Menu1.3 
          
 
           
Menu1.3.1
 
          
 
          
         
Menu1.4
        
        
      
      
       
Menu2
      
       
Menu3
    
      
  
    

menu树的浏览器效果:

 

生成的menu导航条html:

    
  
     
Home    
      
      
       
Menu1        
        
          
         
Menu1.1 
          
 
           
Menu1.1.1
 
           
Menu1.1.2
 
          
 
          
         
Menu1.2
          
         
Menu1.3 
          
 
           
Menu1.3.1
 
          
 
          
         
Menu1.4
        
        
      
      
       
Menu2
      
       
Menu3
    
      
  
    

menu导航的浏览器效果:

 

3.从上面可以看出,由于其它所有menu都是由root根节点生成，所以显示的树状结构并不符合我们的使用习惯，加以改进

后台coding:

public string BuildMenu(int? parentId, string str, string type)        {            IEnumerable
    
      menus = GetMenuByParentId(parentId);            foreach (menu m in menus)            {                try                {                    if (parentId != null) str += "
     
" + m.Description + "";                    str += BuildMenu(m.Id, string.Empty, type);                    if (parentId != null) str += "
";                }                catch                {                }            }            string idstr = string.Empty;            if (menus.Count() > 0)            {                if (parentId == null)                {                    if (type == "Menu") idstr = "
     
      ";                    if (type == "Tree") idstr = "
      
       ";                    str = idstr + "
       
Home
" + str.Substring(4, str.Length - 9) + "
      
";                }                else str = "
      
       " + str + "
      
";            }            return str;        }
     
    

生成的menu树html

    
  
     
Home
  
     
Menu1    
      
      
       
Menu1.1        
        
          
         
Menu1.1.1
          
         
Menu1.1.2
        
        
      
      
       
Menu1.2
      
       
Menu1.3        
        
          
         
Menu1.3.1
        
        
      
      
       
Menu1.4
    
      
  
  
     
Menu2
  
     
Menu3
    

menu树浏览器效果

生成的menu导航条html

    
  
     
Home
  
     
Menu1    
      
      
       
Menu1.1        
        
          
         
Menu1.1.1
          
         
Menu1.1.2
        
        
      
      
       
Menu1.2
      
       
Menu1.3        
        
          
         
Menu1.3.1
        
        
      
      
       
Menu1.4
    
      
  
  
     
Menu2
  
     
Menu3
    

menu导航条浏览器效果

4.使用到的treeview插件可从官网下载

nav-h.css内容如下

li:hover ul, li.over ul{ display:block;}ul#nav {	position: relative;	}ul#nav ul {	position: absolute; display: none; TOP: 100%; right: 0px;}ul#nav ul ul {	TOP: 0px; right: 100%}ul#nav ul ul ul {	TOP: 0px; right: 100%}ul#nav LI {	position: relative; display: inline; FLOAT: left;}ul#nav ul LI {	 display: block;width:250px}ul#nav A {	 display: block;  background: #ddd; FLOAT: left; HEIGHT: 1%; COLOR: #666; BORDER-TOP: #fff 1px solid; BORDER-RIGHT: #fff 1px solid; TEXT-DECORATION: none; padding:3px 20px}ul#nav A:hover {	background: #bbb; COLOR: #fff}ul#nav LI:hover A {	background: #bbb; COLOR: #fff; }ul#nav LI:hover LI A {	background: #bbb; FLOAT: none ;padding:3px 6px;}ul#nav LI:hover LI A:hover {	background: #999}ul#nav LI:hover LI:hover A {	background: #999}ul#nav LI:hover LI:hover LI A {	background: #999}ul#nav LI:hover LI:hover LI A:hover {	background: #666}ul#nav LI:hover LI:hover LI:hover A {	background: #666}ul#nav LI:hover LI:hover LI:hover LI A {	background: #666}ul#nav LI:hover LI:hover LI:hover LI A:hover {	background: #333}ul#nav LI:hover ul ul {	display: none}ul#nav LI:hover ul ul ul {	display: none}ul#nav LI:hover ul {	display: block}ul#nav ul LI:hover ul {	display: block}ul#nav ul ul LI:hover ul {	display: block}