This article describes the menu control using the CSS and UL list to display the menu, the resulting HTML is small, without JavaScript support, most browsers support, in addition to IE6 to modify the CSS can also make it support.
Through this article we can understand the development of asp.net control and the practical application of composite design pattern.
Design the menu class with composite design pattern:
Menucompositeitem class
Copy Code code as follows:
Namespace Ruinet.controls
{
[Serializable ()]
public class Menucompositeitem
{
Private list<menucompositeitem> _children = new list<menucompositeitem> ();
private string _text;
private string _link;
private string _target;
<summary>
Menu items
</summary>
<param name= "text" > Menu name </param>
<param name= "link" > Links </param>
Public Menucompositeitem (string text, String link)
{
This._text = text;
This._link = link;
}
<summary>
Menu items
</summary>
<param name= "text" > Menu name </param>
<param name= "link" > Links </param>
<param name= "target" > Jump target </param>
Public Menucompositeitem (string text, string link, string target)
{
This._text = text;
This._link = link;
This._target = target;
}
<summary>
Set up or get a vegetable single-name
</summary>
public string Text
{
get {return _text;}
set {_text = value;}
}
<summary>
Set up or get a link
</summary>
public string Link
{
get {return _link;}
set {_link = value;}
}
<summary>
Jump target
</summary>
public string Target
{
get {return _target;}
set {_target=value;}
}
<summary>
Set or get submenus
</summary>
Public list<menucompositeitem> Children
{
get {return _children;}
set {_children = value;}
}
}
Menucomposite class
Copy Code code as follows:
Namespace Ruinet.controls
{
[Defaultproperty ("menu")]
[ToolBoxData ("<{0}:menucomposite runat=server></{0}:menucomposite>")]
public class Menucomposite:webcontrol
{
<summary>
Sets the menu to get the selection
</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>
Get and set menu items from ViewState
</summary>
[Bindable (True)]
[DefaultValue (NULL)]
[Localizable (true)]
Public Menucompositeitem MenuItems
{
Get
{
return viewstate["MenuItems"] as Menucompositeitem;
}
Set
{
viewstate["MenuItems"] = value;
}
}
<summary>
Render menu Structure
</summary>
<param name= "Output" >html export stream </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>
Recursive output menu item
</summary>
<param name= "Output" >html export stream </param>
<param name= "Item" > menu item .</param>
<param name= "Depth" >indentation depth.</param>
private void Recursiverender (HtmlTextWriter output, Menucompositeitem Item)
{
Output. Write ("<li>");
if (string. IsNullOrEmpty (item. Target))//null does not set the jump target
{
Output. Write (@ "<a href=" "" + Item.) Link + @ "" ">");
}
Else
{
Output. Write (@ "<a href=" "" + Item.) Link + @ "" target= "" + Item. Target + @ "" ">");
}
if (item. Text = = Selectedmenutext)//Selected menu
{
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>");
}
}
}
Using in the page
After you add a reference to a control, you can see the Menucomposite component directly in the toolbox-controls component
You can use it like any other asp.net control.
Use:
Copy Code code as follows:
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;
At this point, the generated compile run will generate a no style UL list, the effect is as follows:
Therefore, to generate the menu items that can be displayed and hidden, the key is on the CSS setting, the two Level submenu is set to hide Visibility:hidden at the beginning;
Define Li's hover event at the same time, Li:hover: from menu visibility to visible; The general principle is this, and of course, note the location of the menu item
First-level menu float:left, so that it can be displayed horizontally.
CSS is defined as follows:
Copy Code code as follows:
. Navmenu *
{
margin:0;
padding:0;
}
. navmenu
{
border: #000 1px solid;
height:25px;
}
. Navmenu Li
{
/* Horizontal Menu * *
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;
}
/* Set the first level menu style individually * *
. navmenu > Ul > li > A
{
font-size:11px;
Font-weight:bold;
}
. Navmenu a:hover
{
Background: #369;
Color: #fff;
}
/* New Level Two menu part * *
. Navmenu ul ul
{
Visibility:hidden; /* is hidden at the beginning * *
Position:absolute;
left:0px;
top:24px;
}
. Navmenu UL Li:hover ul,. Navmenu UL A:hover ul
{
visibility:visible;
}
. Navmenu ul ul Li
{
Clear:both; /* Vertical Display * *
Text-align:left;
}
/* Select menu item * *
. Navmenu. Selected
{
padding-left:15px;
background-position-x:0px;
Background-image:url (./res/selected.gif);
Background-repeat:no-repeat;
Text-decoration:underline;
}
The effect of defining CSS is as follows:
To this menu control is complete. Has been tested can be in the Ie7,ie8,chrome,firefox normal display, in the IE6 display may have problems, you can refer to the pure CSS multilevel menu to modify,
The CSS Display section of this article refers to this article.
Attach complete code, if you need to download and modify the download file
