Asp.net中递归实现CSS菜单

现在网络上有各种各样的非常漂亮的css菜单，不过大多都是静态的，菜单项都是在页面中写死的，这样就不是很灵活，每次要修改菜单都要去修改页面，下面就介绍一个从数据库中读取菜单项的动态css菜单的例子。

1 首先创建数据表Menu，添加三个基本字段id pid menu

表建好后，添加一些测试数据

2 在项目中创建用户控件LeftMenu，菜单一般可以做成用户控件或是放在Masterpage中。LeftMenu中代码如下。

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="LeftMenu.ascx.cs" Inherits="LeftMenu" %>
<style type="text/css">
body {
margin: 0;
padding: 30px;
background: #FFF;
color: #666;
}
h1 {
font: bold 16px Arial, Helvetica, sans-serif;
}
p {
font: 11px Arial, Helvetica, sans-serif;
}
a {
color: #900;
text-decoration: none;
}
a:hover {
background: #900;
color: #FFF;
}
/*CSS Code for Menu Begin:*/
/* Root = Vertical, Secondary = Vertical */
ul#navmenu, 
ul#navmenu li, 
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px; /*For KHTML*/
list-style: none;
}
ul#navmenu li {
display: block !important; /*For GOOD browsers*/
display: inline; /*For IE*/
position: relative;
}
/* Root Menu */
ul#navmenu a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
display: block;
background: #EEE;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}
/* Root Menu Hover Persistence */
ul#navmenu a:hover, 
ul#navmenu li:hover a, 
ul#navmenu li.iehover a {
background: #CCC;
color: #FFF;
}
/* 2nd Menu */
ul#navmenu li:hover li a, 
ul#navmenu li.iehover li a {
background: #EEE;
color: #666;
}
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover, 
ul#navmenu li:hover li:hover a, 
ul#navmenu li.iehover li a:hover, 
ul#navmenu li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}
/* 3rd Menu */
ul#navmenu li:hover li:hover li a, 
ul#navmenu li.iehover li.iehover li a {
background: #EEE;
color: #666;
}
/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover, 
ul#navmenu li:hover li:hover li:hover a, 
ul#navmenu li.iehover li.iehover li a:hover, 
ul#navmenu li.iehover li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}
/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a, 
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
}
/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover, 
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}
ul#navmenu ul, 
ul#navmenu ul ul, 
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul, 
ul#navmenu li:hover ul ul ul, 
ul#navmenu li.iehover ul ul, 
ul#navmenu li.iehover ul ul ul {
display: none;
}
ul#navmenu li:hover ul, 
ul#navmenu ul li:hover ul, 
ul#navmenu ul ul li:hover ul, 
ul#navmenu li.iehover ul, 
ul#navmenu ul li.iehover ul, 
ul#navmenu ul ul li.iehover ul {
display: block;
}
</style>
<script type="text/javascript">
<!--
    navHover = function() {
 var lis = document.getElementById("navmenu").getElementsByTagName("LI");
 for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
 this.className += " iehover";
            }
            lis[i].onmouseout = function() {
 this.className = this.className.replace(new RegExp(" iehover\\b"), "");
            }
        }
    }
 if (window.attachEvent) window.attachEvent("onload", navHover); 
-->
</script>


<ul id="navmenu">

 <%= _menu %>
</ul> 

3 编写后台代码，主要思路是使用递归来实现菜单的层级关系

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
//new using
using System.Data;
using System.Data.Sql;
using System.Text;

public partial class LeftMenu : System.Web.UI.UserControl
{
    protected string _menu = string.Empty;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindMenu();
        }
    }

    private void BindMenu()
    {
        StringBuilder sb = new StringBuilder();
        OledbHelper helper = new OledbHelper();
        DataSet ds = helper.GetDs("select * from [Menu]");
        if (ds != null && ds.Tables.Count > 0 && ds.Tables[0] != null && ds.Tables[0].Rows.Count > 0)
        {
            DataRow[] rows = ds.Tables[0].Select("ParentID=0");
            foreach (DataRow dr in rows)
            {
                string id = dr["ID"].ToString();
                string name = dr["Name"].ToString();
                sb.Append("<li><a href=\"http://www.google.com\">" + name + "</a>\r\n");//href可以写需要的链接地址
                sb.Append(GetSubMenu(id, ds.Tables[0]));
                sb.Append("</li>\r\n");
            }
            _menu = sb.ToString();
        }
    }

    private string GetSubMenu(string pid, DataTable dt)
    {
        StringBuilder sb = new StringBuilder();
        DataRow[] rows = dt.Select("ParentID=" + pid);
        sb.Append("<ul>\r\n");
        foreach (DataRow dr in rows)
        {
            string id = dr["ID"].ToString();
            string name = dr["Name"].ToString();
            sb.Append("<li><a href=\"http://www.google.com\">" + name + "</a>\r\n");
            sb.Append(GetSubMenu(id, dt));  //递归
            sb.Append("</li>\r\n");
        }
        sb.Append("</ul>\r\n");
        return sb.ToString();
    }
}

4 创建aspx页面Menu 将用户控件拖到页面中，运行就可以看到效果。

注：该例子需要有一个静态的css菜单作为模板，网络上很多的css菜单都可以来套用，当然css很强的朋友自己来设计会更好。

Demo下载