1.CSS样式
2.Js脚本
3.XML文件定义
4.用户控件后台代码
先贴个效果图上来:
第一部份:
/**********************************************************菜单样式*******************************/
.ucPnlNav
{
margin-left:auto;
margin-right:auto;
width:600px;
position:absolute;
z-index:1000;
}
.ucPnlNav ul
{
margin:0 0 0 0;
width:100%;
list-style:none;
}
.ucPnlNav ul li
{
float:left;
height:25px;
font-family:Tahoma;
font-size:10pt;
margin-left:5px;
width:15%;
}
.ucPnlNav a:link
{
padding-top:5px;
text-align:center;
display:block;
font-size: 10pt;
cursor: hand;
color: #ffffff;
font-family:Tahoma, Arial, Helvetica, sans-serif;
text-decoration: none;
width:100%;
}
.ucPnlNav a:hover
{
padding-top:5px;
text-align:center;
width:100%;
display:block;
background:#808080;
font-size: 10pt;
cursor: hand;
color: #808080;
font-family:Tahoma, Arial, Helvetica, sans-serif;
text-decoration: none
}
.ucPnlNav a:visited
{
padding-top:5px;
text-align :center;
display:block;
font-size: 10pt;
cursor: hand;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
width:100%;
}
.pnlSubHidden
{
display:none;
}
.pnlSubShow
{
display:block;
margin-left:5px;
}
.pnlSubShow ul
{
list-style:none;
font-size:10px;
}
.pnlSubShow ul li
{
height:20px;
font-family:Tahoma;
font-size:9pt;
background:url(../Images/ig_menuTri1.gif) no-repeat left;
padding-left:8px;
width:100%;
}
.pnlSubShow a:link
{
padding-top:5px;
text-align:center;
display:block;
font-size: 9pt;
cursor: hand;
color: #ccff00;
font-family:Tahoma, Arial, Helvetica, sans-serif;
text-decoration: none;
text-align:left;
}
.pnlSubShow a:hover
{
padding-top:5px;
text-align:center;
display:block;
font-size: 9pt;
cursor: hand;
color: #80d0ff;
font-family:Tahoma, Arial, Helvetica, sans-serif;
text-decoration: none;
text-align:left;
}
.pnlSubShow a:visited
{
padding-top:5px;
text-align :center;
display:block;
font-size: 9pt;
cursor: hand;
color: #ccff00;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
text-align:left;
}
/**********************************************************菜单JS*******************************/
function showSubMenu()
{ if(showSubMenu.arguments.length>0)
{
var parentele=showSubMenu.arguments[0];
var eledv=document.getElementById(showSubMenu.arguments[0]);
if(eledv)
{
eledv.className="pnlSubShow";
}
}
}
function hiddenSubMenu()
{
if(hiddenSubMenu.arguments.length>0 )
{
var eledv=document.getElementById(hiddenSubMenu.arguments[0]);
if(eledv)
{
eledv.className="pnlSubHidden";
}
}
}
**********************************************************XML定义 Menu.xml*******************************/
<?xml version="1.0" encoding="utf-8" ?>
<OnlineMenu>
<FirstLevel url="#" title="菜单文字" description="">
<SecondLevel url="#" title="菜单文字" description="" />
<SecondLevel url="#" title="菜单文字" description="" />
<SecondLevel url="#" title="菜单文字" description="" />
<SecondLevel url="#" title="菜单文字" description="" />
<SecondLevel url="#" title="菜单文字" description="" />
<SecondLevel url="#" title="菜单文字" description="" />
</FirstLevel>
<FirstLevel url="#" title="地产" description="">
<SecondLevel url="#" title="菜单文字" description="" />
<SecondLevel url="#" title="菜单文字" description="" />
<SecondLevel url="#" title="菜单文字" description="" />
<SecondLevel url="#" title="菜单文字" description="" />
</FirstLevel>
<FirstLevel url="#" title="菜单文字" description="">
<SecondLevel url="#" title="菜单文字" description="" />
<SecondLevel url="#" title="菜单文字" description="" />
</FirstLevel>
<FirstLevel url="#" title="菜单文字" description="">
<SecondLevel url="#" title="菜单文字" description="" />
<SecondLevel url="#" title="菜单文字" description="" />
</FirstLevel>
<FirstLevel url="#" title="健康" description="">
<SecondLevel url="#" title="生活" description="" />
<SecondLevel url="#" title="求医" description="" />
<SecondLevel url="#" title="咨询" description="" />
</FirstLevel>
</OnlineMenu>
**********************************************************Navigetion.ascx*******************************/
前台:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Navigetion.ascx.cs" Inherits="Online.Web.Navigetion" %>
<asp:Panel ID="pnlMenu" runat="server" CssClass="pnlMenu"></asp:Panel>
后台:
public partial class Navigetion : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
//动态加载菜单
LoadMenu();
}
/// <summary>
/// 动态加载XML菜单
/// </summary>
private void LoadMenu()
{
//定义Xml操作文档
XmlDocument menuXd = new XmlDocument();
try
{
//加载XML
menuXd.Load(Server.MapPath("Menu.xml").ToString());
//获取根结点
XmlNode xnFather = menuXd.DocumentElement;
//获取一级菜单结点
XmlNodeList firstLevelList = xnFather.ChildNodes;
//菜单客户端字符串
StringBuilder firstString = new StringBuilder("<ul>\n");
for (int i = 0; i < firstLevelList.Count; i++)
{
XmlNode xn = firstLevelList[i];
//构建子菜单ID
string subMenuID = "dv" + i.ToString();
string li = string.Empty;
if (xn.ChildNodes.Count > 0)
{
li = string.Format("<li onmouseover=\"showSubMenu('" + subMenuID + "')\" onmouseout=\"hiddenSubMenu('" + subMenuID + "')\"><a href=\"{0}\" >{1}</a>" + CreateSubMenu(xn, subMenuID) + "</li>\n", xn.Attributes["url"].Value, xn.Attributes["title"].Value);
}
else
{
li = string.Format("<li><a href=\"{0}\" >{1}</a></li>\n", xn.Attributes["url"].Value, xn.Attributes["title"].Value);
}
firstString.Append(li);
}
firstString.Append("</ul>");
//添加到客户端
pnlMenu.Controls.Add(new LiteralControl(firstString.ToString()));
}
catch
{
throw new Exception("加载菜单失败！");
}
}
//创建子菜单
private string CreateSubMenu(XmlNode firstXn, string id)
{
//得到一级菜单对应的子菜单
XmlNodeList secondLevelList = firstXn.ChildNodes;
//菜单客户端字符串
StringBuilder secondString = new StringBuilder("<div id='" + id + "' class=\"pnlSubContentHidden\"><ul>\n");
foreach (XmlNode xn in secondLevelList)
{
string li = string.Format("<li><a href=\"{0}\" >{1}</a></li>\n", xn.Attributes["url"].Value, xn.Attributes["title"].Value);
secondString.Append(li);
}
secondString.Append("</ul>\n</div>");
return secondString.ToString();
}
}
