一、首先找到三张菜单背景图片。
（分别是菜单顶边、菜单中间背景和菜单底边）
二、设计XML文件
<?xml version="1.0" encoding="utf-8" ?><NavMenu><Menus Text="个人助理" ID="1"> <MenuItem Text="我的首页" ImageUrl="../../Images/Menu/MyHomePage16.gif" NavigateUrl="../../Modules/Office/MyHomePage.aspx" /> <MenuItem Text="备 忘 录" ImageUrl="../../Images/Menu/MyMemo16.gif" NavigateUrl="../../Modules/Office/MyMemoList.aspx?id=0&Day=0" /> <MenuItem Text="我的计划" ImageUrl="../../Images/Menu/MyTask16.gif" NavigateUrl="../../Modules/Office/MyToDo.aspx" /> <MenuItem Text="工作日志" ImageUrl="../../Images/Menu/MyLog16.gif" NavigateUrl="../../Modules/Office/MyBlogList.aspx" /></Menus><Menus Text="业务管理" ID="2"> <MenuItem Text="案件登记" ImageUrl="../../Images/Menu/LawCaseAdd16.gif" NavigateUrl="../../Modules/CaseManagement/AddLawCase.aspx" /> <MenuItem Text="案件管理" ImageUrl="../../Images/Menu/Lawcaselist16.gif" NavigateUrl="../../Modules/CaseManagement/LawCaseList.aspx?Lawyer=No&Type=No&Phase=No" /> <MenuItem Text="案件查询" ImageUrl="../../Images/Menu/find.gif" NavigateUrl="../../Modules/CaseManagement/LawCaseQuery.aspx?Page=Lawyer" /> <MenuItem Text="案件统计" ImageUrl="../../Images/Menu/LawcaseReport16.gif" NavigateUrl="../../Modules/CaseManagement/LawCaseStat.aspx?Condition=Type" /> <MenuItem Text="冲突查询" ImageUrl="../../Images/Menu/mywatches16.gif" NavigateUrl="../../Modules/CaseManagement/ConflictQuery.aspx" /></Menus><Menus Text="财务管理" ID="3"> <MenuItem Text="收支明细" ImageUrl="../../Images/Menu/details16.gif" NavigateUrl="../../Modules/Finance/IncomeList.aspx?IncomeType=All" /> <MenuItem Text="收支查询" ImageUrl="../../Images/Menu/find.gif" NavigateUrl="../../Modules/Finance/QueryIncome.aspx" /> <MenuItem Text="收支统计" ImageUrl="../../Images/Menu/LawcaseReport16.gif" NavigateUrl="../../Modules/Finance/IncomeStat.aspx?Condition=LegalFee" /></Menus><Menus Text="客户管理" ID="4"> <MenuItem Text="客户登记" ImageUrl="../../Images/Menu/CustomerAdd16.gif" NavigateUrl="../../Modules/CustomerManagement/ShowCustomer.aspx?ReturnURL=List&Type=New&ID=0" /> <MenuItem Text="客户列表" ImageUrl="../../Images/Menu/CustomerList16.gif" NavigateUrl="../../Modules/CustomerManagement/CustomerList.aspx" /> <MenuItem Text="客户查询" ImageUrl="../../Images/Menu/mywatches16.gif" NavigateUrl="../../Modules/CustomerManagement/QueryCustomer.aspx" /></Menus><Menus Text="法律法规" ID="5"> <MenuItem Text="法规列表" ImageUrl="../../Images/Menu/Details16.gif" NavigateUrl="../../Modules/LawDoc/LawDocList.aspx" /> <MenuItem Text="下载最新" ImageUrl="../../Images/Menu/find.gif" NavigateUrl="../../Modules/LawDoc/LawDocUpdate.aspx" /></Menus><Menus Text="系统管理" ID="6"> <MenuItem Text="人员列表" ImageUrl="../../Images/Menu/UserList16.gif" NavigateUrl="../../Modules/SysManagement/LawyerList.aspx" /> <MenuItem Text="合同模板" ImageUrl="../../Images/Menu/Template16.gif" NavigateUrl="../../Modules/SysManagement/ContractTemplateList.aspx" /> <MenuItem Text="参数设置" ImageUrl="../../Images/Menu/SysConfig16.gif" NavigateUrl="../../Modules/SysManagement/SysConfig.aspx?XMLFile=CaseType" /></Menus></NavMenu>
三、设计嵌套DataList.
ASPX文件如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ><html> <head> <title>NavMenuBar</title> <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> <Link Rel="stylesheet" href="../../css/admin_css.css"> </head> <body MS_POSITIONING="GridLayout" topmargin="0" leftmargin="0" bgcolor="#ffffff" rightmargin="0" scroll="no" onload="ShowFirst()"> <form id="Form1" method="post" runat="server"> <base target='main'> <asp:datalist id="NavMenu_List" Width="100%" RepeatDirection="Vertical" DataKeyField="ID" Runat="server" OnItemDataBound="MenuItem_ItemDataBound"> <ItemTemplate>
<div class='category cursor' id='Menu<%# ((DataRowView)Container.DataItem)["ID"]%>' onclick=shift('<%
# ((DataRowView)Container.DataItem)["ID"]%>')> <img src="../../Images/menu/yellowdot.gif"> <a href='#' target="_self"> <%# ((DataRowView)Container.DataItem)["Text"]%> </a> </div> <div class='grid' id='<%# ((DataRowView)Container.DataItem)["ID"]%>' style="DISPLAY:none"> <ul> <asp:datalist id="MenuItem_List" Runat="server" RepeatDirection="Vertical" Width="100%"> <ItemTemplate> <div class='Item'> <img src='<%# ((DataRowView)Container.DataItem)["ImageUrl"]%>'> <a href='<%# ((DataRowView)Container.DataItem)["NavigateUrl"]%>'> <%# ((DataRowView)Container.DataItem)["Text"]%> </a> <br> </div> </ItemTemplate> </asp:datalist> </ul> </div> <div class="emptygrid"></div> </ItemTemplate> </asp:datalist> </form> </body></html>
四、鼠标点击要隐藏其他菜单
javascript 代码如下：
<script language='javascript'>function shift(id){
var this_id = id; var ID_Array = new Array("1","2", "3", "4", "5","6","7"); var objThis; for (var i=0; i<ID_Array.length; i++)
{ objThis = document.getElementById(ID_Array[i]); if (this_id == ID_Array[i]) { objThis.style.display = 'inline';
} else { objThis.style.display = 'none'; } }
}function ShowFirst(){ document.getElementById("1").style.display= 'inline';}</script>
五、后面的C#代码如下：
public class NavMenuBar : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataList NavMenu_List; protected DataTable dt_TopMenu; protected DataTable dt_MenuItem; protected DataSet ds_NavMenu; protected string sCurrentMenuID; private void Page_Load(object sender, System.EventArgs e)
{ // 在此处放置用户代码以初始化页面 if(!IsPostBack) { sCurrentMenuID="1"; ReadXMLMenu(); BindDate_TopMenu();
} } public void ReadXMLMenu() { //读菜单XML文件，分别放入到两张表中。 string sID="0"; //临时记录菜单ID ds_NavMenu = new DataSet(); dt_TopMenu = new DataTable(); dt_MenuItem = new DataTable(); DataRow dr_TopMenu; dt_TopMenu.Columns.Add(new DataColumn("ID",typeof(System.String))); dt_TopMenu.Columns.Add(new DataColumn("Text", typeof(System.String))); DataRow dr_MenuItem; dt_MenuItem.Columns.Add(new DataColumn("ParentID",typeof(System.String))); dt_MenuItem.Columns.Add(new DataColumn("Text", typeof(System.String))); dt_MenuItem.Columns.Add(new DataColumn("ImageUrl", typeof(System.String))); dt_MenuItem.Columns.Add(new DataColumn("NavigateUrl", typeof(System.String))); string xmlfile; xmlfile = Server.MapPath("../../") + "XMLData/NavMenu_Network.xml"; //这里以后可以任意更换，通过web.config XmlTextReader reader = new XmlTextReader(xmlfile); while (reader.Read()) { if(reader.NodeType == XmlNodeType.Element) { if (reader.Name=="Menus") { //读顶层菜单 dr_TopMenu = dt_TopMenu.NewRow(); sID = reader["ID"].ToString(); dr_TopMenu[0] = reader["ID"].ToString(); dr_TopMenu[1] = reader["Text"].ToString(); dt_TopMenu.Rows.Add(dr_TopMenu); } //然后读这个菜单下面的子菜单 else if (reader.Name=="MenuItem") { dr_MenuItem = dt_MenuItem.NewRow(); dr_MenuItem[0] = sID; dr_MenuItem[1] = reader["Text"].ToString(); dr_MenuItem[2] = reader["ImageUrl"].ToString(); dr_MenuItem[3] = reader["NavigateUrl"].ToString(); dt_MenuItem.Rows.Add(dr_MenuItem); } } } reader.Close(); ds_NavMenu.Tables.Add(dt_TopMenu); ds_NavMenu.Tables.Add(dt_MenuItem); DataColumn parentCol; DataColumn childCol; parentCol = dt_TopMenu.Columns["ID"]; childCol = dt_MenuItem.Columns["ParentID"]; DataRelation rel; rel = new DataRelation("MenuRelation", parentCol, childCol); // Add the relation to the DataSet. ds_NavMenu.Relations.Add(rel); } public void BindDate_TopMenu() { NavMenu_List.DataSource = dt_TopMenu; NavMenu_List.DataBind(); } public void MenuItem_ItemDataBound(object sender, System.Web.UI.WebControls.DataListItemEventArgs e) { //Only consume the items in the parent datalist //pertinent to nesting if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { //Now that the nested repeater is in scope, find it, //cast it, and create a child view from //the datarelation name, and specify that view as the //datasource. Then bind the nested repeater! string sMenuID = NavMenu_List.DataKeys[e.Item.ItemIndex].ToString(); DataList MenuItem_List = (DataList)e.Item.FindControl("MenuItem_List"); if (MenuItem_List != null) { MenuItem_List.DataSource = ((DataRowView)e.Item.DataItem).CreateChildView("MenuRelation"); MenuItem_List.DataBind(); } } } #region Web 窗体设计器生成的代码 override protected void OnInit(EventArgs e) { // // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。 // InitializeComponent(); base.OnInit(e); } /// <summary> /// 设计器支持所需的方法 - 不要使用代码编辑器修改 /// 此方法的内容。 /// </summary> private void InitializeComponent() { this.Load += new System.EventHandler(this.Page_Load); } #endregion
}
