ASP.NET菜单用户控件：.NET无限级扩展菜单用户控件实现
本文主要是用CSS+ASP.NET实现无限级扩展菜单，下图先看下效果图：
看到这个.NET无限级扩展菜单效果不错吧，下面直接看代码吧：
WebMenu.ascx 文件
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]-->
WebMenu.ascx.cs文件
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 }