这个菜单分四部份,可能描述得很不清
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();

           }

     
    }



posted on 2008-06-25 13:46  louja  阅读(280)  评论(0编辑  收藏  举报
老刘