Asp.net menu control simple version

The menu control introduced in this article uses css and ul list to display the menu. The generated html is small and does not require javascript support. It is supported by most browsers. Except for ie6, it can also be supported by modifying the css separately.
Through this article, you can learn about the development of asp.net controls and the practical application of the Composite design pattern.
Use the Composite design pattern to design the menu class:
MenuCompositeitem class

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 class

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(@"<div class=""navmenu"">"); 
output.Write(@" <ul>"); 
for (int i = 0; i < root.Children.Count; i++) 
{ 
RecursiveRender(output, root.Children[i]); 
} 
output.Write(@" </ul>"); 
output.Write(@"</div>"); 
} 
/// <summary> 
/// 递归输出菜单项 
/// </summary> 
/// <param name="output">HTML输出流</param> 
/// <param name="item">菜单项.</param> 
/// <param name="depth">Indentation depth.</param> 
private void RecursiveRender(HtmlTextWriter output, MenuCompositeItem item) 
{ 
output.Write("<li>"); 
if (string.IsNullOrEmpty(item.Target))//为空不设置跳转目标 
{ 
output.Write(@"<a href=""" + item.Link + @""">"); 
} 
else 
{ 
output.Write(@"<a href=""" + item.Link + @""" target= """ + item.Target + @""">"); 
} 
if (item.Text == SelectedMenuText) //选中的菜单 
{ 
output.Write(@"<span class=""selected"">"); 
output.WriteLine(item.Text); 
output.WriteLine("</span>"); 
} 
else 
{ 
output.Write(item.Text); 
} 
output.Write("</a>"); 
if (item.Children.Count > 0) 
{ 
output.WriteLine(); 
output.Write("<ul>"); 
for (int i = 0; i < item.Children.Count; i++) 
{ 
RecursiveRender(output, item.Children[i]); 
} 
output.Write("</ul>"); 
} 
output.Write("</li>"); 
} 
} 
}

Use in the page
After adding a reference to the control, you can directly add it in " You can see the MenuComposite component in the "Toolbox" - "Controls component
Then you can use it like other asp.net controls
Use:

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 = new MenuCompositeItem("menu01-01", ResolveUrl("~/Default.aspx")); 
MenuCompositeItem menu01_02 = new MenuCompositeItem("menu01-02", ResolveUrl("~/Page01-02.aspx")); 
MenuCompositeItem menu01_03 = new MenuCompositeItem("menu01-03", ResolveUrl("~/Default.aspx")); 
MenuCompositeItem menu01_04 = new MenuCompositeItem("menu01-04", ResolveUrl("~/Default.aspx")); 
menu01.Children.Add(menu01_01); 
menu01.Children.Add(menu01_02); 
menu01.Children.Add(menu01_03); 
menu01.Children.Add(menu01_04); 

MenuCompositeItem menu02_01 = new MenuCompositeItem("menu02-01", ResolveUrl("~/Default.aspx")); 
MenuCompositeItem menu02_02 = new MenuCompositeItem("menu02-02", ResolveUrl("~/Default.aspx"), "menu02-02"); 
menu02.Children.Add(menu02_01); 
menu02.Children.Add(menu02_02); 

MenuCompositeItem menu04_01 = new MenuCompositeItem("menu04-01", ResolveUrl("~/Default.aspx")); 
MenuCompositeItem menu04_02 = new MenuCompositeItem("menu04-02", ResolveUrl("~/Page04-02.aspx"), "_blank"); 
menu04.Children.Add(menu04_01); 
menu04.Children.Add(menu04_02); 
root.Children.Add(menu01); 
root.Children.Add(menu02); 
root.Children.Add(menu03); 
root.Children.Add(menu04); 
root.Children.Add(menu05);

TheMenuComposite.MenuItems = root;
Generated at this time After compiling and running, an Ul list without style will be generated. The effect is as follows:

Therefore, to generate menu items that can be displayed and hidden, the key lies in the setting of css. At the beginning Set the secondary submenu to hidden visibility: hidden;
At the same time define the hover event of li. When li:hover: the visibility of the self-menu should be changed to visible; The general principle is this, of course, pay attention to the location of the menu items
The first-level menu float:left; enables it to be displayed horizontally.
CSS is defined as follows:

.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; 
}

The effect after defining CSS is as follows:

This menu control has been completed. It has been tested that it can be displayed normally in IE7, IE8, Chrome, and Firefox. There may be problems with the display in IE6. You can refer to the pure CSS multi-level menu for modification.
For more articles related to the simple version of the Asp.net menu control, please pay attention PHP Chinese website!