asp.net自带的菜单控件采用的table和javascript，导致生成的大量的html,同时在很多浏览器中都无法显示出子菜单，也只能在IE中能显示出来。

本文介绍的菜单控件采用的css 和ul list来显示菜单，生成的html小，无需javascript支持，对大部分的浏览器都支持，除ie6要单独修改css也可以使其支持。

通过本文可以了解asp.net 控件的开发，及Composite设计模式的实际运用。

 采用Composite设计模式设计菜单类：

MenuCompositeitem类

namespace Ruinet.Controls
{
  [Serializable()]
  public class MenuCompositeItem
  {
    private List<MenuCompositeItem> _children = new List<MenuCompositeItem>();
    private string _text;
    private string _link;
    private string _target;/// <summary>
    /// 菜单项
    /// </summary>
    /// <param name="text">菜单名</param>
    /// <param name="link">链接</param>
    public MenuCompositeItem(string text, string link)
    {
      this._text = text;
      this._link = link;
    }
    /// <summary>
    /// 菜单项
    /// </summary>
    /// <param name="text">菜单名</param>
    /// <param name="link">链接</param>
    /// <param name="target">跳转目标</param>
    public MenuCompositeItem(string text, string link, string target)
    {
      this._text = text;
      this._link = link;
      this._target = target;
    }/// <summary>
    /// 设置或获取菜单名
    /// </summary>
    public string Text
    {
      get { return _text; }
      set { _text = value; }
    }/// <summary>
    /// 设置或获取链接
    /// </summary>
    public string Link
    {
      get { return _link; }
      set { _link = value; }
    }
    /// <summary>
    /// 跳转目标
    /// </summary>
    public string Target
    {
      get { return _target; }
      set { _target=value; }
    }/// <summary>
    /// 设置或获取子菜单
    /// </summary>
    public List<MenuCompositeItem> Children
    {
      get { return _children; }
      set { _children = value; }
    }
  }

MenuComposite类

namespace Ruinet.Controls
{
  [DefaultProperty("Menu")]
  [ToolboxData("<{0}:MenuComposite runat=server></{0}:MenuComposite>")]
  public class MenuComposite : WebControl
  {
    /// <summary>
    /// 设置获取选择的菜单
    /// </summary>
    [Bindable(true)]
    [DefaultValue("")]
    [Localizable(true)]
    public string SelectedMenuText
    {
      get
      {
        String s = (String)ViewState["SelectedMenuText"];
        return ((s == null) ? String.Empty : s);
      }set
      {
        ViewState["SelectedMenuText"] = value;
      }
    }/// <summary>
    /// 获取和设置菜单项从ViewState
    /// </summary>
    [Bindable(true)]
    [DefaultValue(null)]
    [Localizable(true)]
    public MenuCompositeItem MenuItems
    {
      get
      {
        return ViewState["MenuItems"] as MenuCompositeItem;
      }set
      {
        ViewState["MenuItems"] = value;
      }
    }/// <summary>
    /// 呈现菜单结构
    /// </summary>
    /// <param name="output">HTML输出流</param>
    protected override void RenderContents(HtmlTextWriter output)
    {
      MenuCompositeItem root = this.MenuItems;

      output.Write(

 在页面中使用

添加对控件的引用后就可以直接在“工具箱”-》Controls组件中 看到MenuComposite组件

再就可以像其他asp.net 控件一样使用

使用：

 MenuCompositeItem root = new MenuCompositeItem("root", null);
    MenuCompositeItem menu01 = new MenuCompositeItem("menu01", ResolveUrl("~/Default.aspx"));
    MenuCompositeItem menu02 = new MenuCompositeItem("menu02", ResolveUrl("~/Default.aspx"));
    MenuCompositeItem menu03 = new MenuCompositeItem("menu03", ResolveUrl("~/Default.aspx"));
    MenuCompositeItem menu04 = new MenuCompositeItem("menu04", ResolveUrl("~/Page04.aspx"));
    MenuCompositeItem menu05 = new MenuCompositeItem("menu05", ResolveUrl("~/Default.aspx"));

    MenuCompositeItem menu01_01 

此时生成的编译运行后会生成一个没有样式Ul list ,效果如下：

因此要生成可显示和隐藏的菜单项，关键在css的设置上，开始时将二级子菜单设置为隐藏visibility: hidden;

同时定义li的hover事件，li:hover时：自菜单的 visibility要改为visible; 大致原理是这样，当然还有注意菜单项的位置

一级菜单float:left;使其能水平显示。

CSS定义如下：

.navmenu *
{
    margin: 0;
    padding: 0;
}
.navmenu
{
    border: #000 1px solid;
    height: 25px;
}
.navmenu li
{
    /*水平菜单*/
    float: left;
    list-style: none;
    position: relative;
}
.navmenu a
{
    display: block;
    font-size: 12px;
    height: 24px;
    width: 100px;
    line-height: 24px;
    background-color: #CDEB8B;
    color: #0000ff;
    text-decoration: none;
    text-align: center;
    border-left: #36393D 1px inset;
    border-right: #36393D 1px inset;
    border-bottom: #36393D 1px inset;
}
/*单独设置一级菜单样式*/
.navmenu > ul > li > a
{
    font-size: 11px;
    font-weight: bold;
}
.navmenu a:hover
{
    background: #369;
    color: #fff;
}
/*新增的二级菜单部分*/
.navmenu ul ul
{
    visibility: hidden; /*开始时是隐藏的*/
    position: absolute;
    left: 0px;
    top: 24px;
}
.navmenu ul li:hover ul, .navmenu ul a:hover ul
{
    visibility: visible;
}
.navmenu ul ul li
{
    clear: both; /*垂直显示*/
    text-align: left;
}
/*选中菜单项*/
.navmenu .selected
{
    padding-left:15px;
    background-position-x:0px;
    background-image: url(./res/selected.gif);
    background-repeat: no-repeat;
    text-decoration:underline;
}

定义CSS后的效果如下：

到此菜单控件已完成。已测试过可以在IE7,IE8,Chrome,Firefox中正常显示，在IE6显示可能会有问题，可以参考纯CSS多级菜单 进行修改，

本文的CSS显示部分参考了此文的介绍。

 附上完整代码，如需要可自行下载修改：/Files/ruinet/WebMenu.zip