CSS+ASP.NET无限级扩展菜单
简易效果图：
WebMenu.ascx 文件
Code
1 <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebMenu.ascx.cs" Inherits="UserControls_WebMenu" %>
2 <style type="text/css">
3 /* common styling */
4 .menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;}
5 .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#4286de; line-height:20px; font-size:11px; overflow:hidden;}
6 .menu ul {padding:0; margin:0;list-style-type: none; }
7 .menu ul li {float:left; margin-right:1px; position:relative;}
8 .menu ul li ul {display: none;}
9 /* specific to non IE browsers */
10 .menu ul li:hover a {color:#fff; background:#36f;}
11 .menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
12 .menu ul li:hover ul li a.hide {background:#bddbff; color:#000;}
13 .menu ul li:hover ul li:hover a.hide {background:#bddbff; color:#000;}
14 .menu ul li:hover ul li ul {display: none;}
15 .menu ul li:hover ul li a {display:block; background:#bddbff; color:#000;}
16 .menu ul li:hover ul li a:hover {background:#bddbff; color:#000;}
17 .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
18 .menu ul li:hover ul li:hover ul.left {left:-105px;}
19 </style>
20 <!--[if lte IE 6]>
21 <style type="text/css">
22 .menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
23 .menu ul li a:hover ul li a.hide {display:none;}
24 .menu ul li a:hover {color:#fff; background:#36f;}
25 .menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
26 .menu ul li a:hover ul li a.sub {background:#bddbff; color:#000;}
27 .menu ul li a:hover ul li a {display:block; background:#bddbff; color:#000;}
28 .menu ul li a:hover ul li a ul {visibility:hidden;}
29 .menu ul li a:hover ul li a:hover {background:#bddbff; color:#000;}
30 .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
31 .menu ul li a:hover ul li a:hover ul.left {left:-105px;}
32 </style>
33 <![endif]-->
34
-------------
WebMenu.ascx.cs文件
Code
1 using System;
2 using System.Collections.Generic;
3 using System.Web;
4 using System.Web.UI;
5 using System.Web.UI.WebControls;
6 using DAL;
7 using System.Data;
8 using Entity;
9 using System.Text;
10
11 public partial class UserControls_WebMenu : System.Web.UI.UserControl
12 {
13 IEnumerable<MenuInfo> list;
14
15 protected void Page_Load(object sender, EventArgs e)
16 {
17 list = MenuInfoAccess.GetMenuTree();
18 }
19
20 protected override void Render(HtmlTextWriter writer)
21 {
22 base.Render(writer);
23
24 writer.Write("<div class='menu'>");
25
26 if(list!=null)
27 writer.Write(ProductMenu(list));
28
29 writer.Write("</div>");
30 }
31
32 protected string ProductMenu(IEnumerable<MenuInfo> source)
33 {
34 StringBuilder sb = new StringBuilder();
35 sb.Append("<ul>");
36
37 foreach (MenuInfo item in source)
38 {
39 if (item.ChildMenuInfo.Count != 0)
40 {
41
42 sb.Append(string.Format("<li><a class='hide' href='{1}'>{0}</a>", item.TitleCN, item.FilePath));
43
44 sb.Append("<!--[if lte IE 6]>");
45 sb.Append(string.Format("<a class='sub' href='{1}' title=''>{0}>",item.TitleCN,item.FilePath));
46 sb.Append("<table><tr><td>");
47 sb.Append("<![endif]-->");
48
49 sb.Append(ProductMenu(item.ChildMenuInfo));//递归生成子菜单
50
51 sb.Append("<!--[if lte IE 6]>");
52 sb.Append("</td></tr></table>");
53 sb.Append("</a>");
54 sb.Append("<![endif]-->");
55
56 sb.Append("</li>");
57 }
58 else
59 {
60 sb.Append(string.Format("<li><a href='{1}'>{0}</a></li>", item.TitleCN, item.FilePath));
61 }
62
63 }
64
65 sb.Append("</ul>");
66
67 return sb.ToString();
68
69 }
70 }
71
-----------------------
MenuInfoAccess.cs文件
Code
using System;
using System.Collections.Generic;
using System.Text;
using Entity;
using System.Data;
namespace DAL
{
public class MenuInfoAccess
{
public static IEnumerable<MenuInfo> GetMenuTree()
{
string strSql = "select * from Menu order by sort";
DataTable dt = OleDbHelper.ExecuteDataTable(OleDbHelper.CONN_STRING, CommandType.Text, strSql);
return MenuInfoAccess.GetMenuNodeCollection(dt);
}
public static IEnumerable<MenuInfo> GetMenuNodeCollection(DataTable dt)
{
int type = 1;
List<MenuInfo> menus = new List<MenuInfo>();
MenuInfo menu;
for (int i = 0; i < dt.Rows.Count; i++)
{
DataRow dr = dt.Rows[i];
if ((int)dr["ParentId"] == 0)
{
menu = new MenuInfo();
menu.Level = type;
menu.Id = (int)dr["ID"];
menu.TitleCN = dr["NameCN"] == DBNull.Value ? string.Empty : (string)dr["NameCN"];
menu.TitleEN = dr["NameEN"]==DBNull.Value?string.Empty:(string)dr["NameEN"];
menu.FilePath = dr["URL"]==DBNull.Value?string.Empty:(string)dr["URL"];
menu.IsVisibily = (bool)dr["Visibily"];
menu.ChildMenuInfo = GetChileNodeCollection(menu, dt, type);//递归获得子节点结合
menus.Add(menu);
}
}
return menus;
}
//CHILE COLLECTION
public static List<MenuInfo> GetChileNodeCollection(MenuInfo xElement, DataTable C, int type)
{
int childType = type + 1;
MenuInfo item;
List<MenuInfo> list = new List<MenuInfo>();
DataRow[] collection = C.Select("ParentId=" + xElement.Id, "sort");
if (collection.Length != 0)
{
foreach (DataRow dr in collection)
{
item = new MenuInfo();
item.Level = childType;
item.Id = (int)dr["ID"];
item.TitleCN = dr["NameCN"]==DBNull.Value?string.Empty:(string)dr["NameCN"];
item.TitleEN = dr["NameEN"] == DBNull.Value ? string.Empty : (string)dr["NameEN"];
item.FilePath = dr["URL"] == DBNull.Value ? string.Empty : (string)dr["URL"];
item.IsVisibily = (bool)dr["Visibily"];
item.ChildMenuInfo = GetChileNodeCollection(item, C, childType);//递归获得子节点结合
list.Add(item);
}
}
return list;
}
}
}
-----------------------------------------------------------
MenuInfo.cs 菜单实体类
Code
1 using System;
2 using System.Collections.Generic;
3 using System.Text;
4
5 namespace Entity
6 {
7 /// <summary>
8 /// 菜单信息实体类
9 /// </summary>
10 [Serializable]
11 public class MenuInfo
12 {
13 public int Id { get; set; }
14 /// <summary>
15 /// <summary>
16 /// 显示名称
17 /// </summary>
18 public string TitleCN { get; set; }
19 public string TitleEN { get; set; }
20
21 /// <summary>
22 /// 控件的完整类名或者文件相对路径
23 /// </summary>
24 public string FilePath { get; set; }
25
26 public MenuInfo Parent { get; set; }
27
28 public List<MenuInfo> ChildMenuInfo { get; set; }
29
30 /// <summary>
31 /// 节点层级,数据库可有可无这个字段，实体类需要
32 /// </summary>
33 private int level;
34 public int Level
35 {
36 get { return level; }
37 set { level = value; }
38 }
39 /// <summary>
40 /// 是否显示在菜单栏中
41 /// </summary>
42 private bool? isVisibily;
43 public bool? IsVisibily
44 {
45 get { return isVisibily; }
46 set { isVisibily = value; }
47 }
48 }
49
