This article describes the menu controls that use the CSS and UL list to display menus, resulting in small HTML, no JavaScript support, and support for most browsers, except IE6 to modify the CSS individually.
This article can be used to understand the development of ASP and the practical application of composite design pattern.
Design the menu class using the composite design pattern:
Menucompositeitem class
Copy CodeThe code is 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 or get dish sole name
</summary>
public string Text
{
get {return _text;}
set {_text = value;}
}
<summary>
Set or get Links
</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 sub-menu
</summary>
Public list<menucompositeitem> Children
{
get {return _children;}
set {_children = value;}
}
}
Menucomposite class
Copy CodeThe code is as follows:
Namespace Ruinet.controls
{
[Defaultproperty ("menu")]
[ToolBoxData ("<{0}:menucomposite runat=server></{0}:menucomposite>")]
public class Menucomposite:webcontrol
{
<summary>
Set the Get selected menu
</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 out 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 out 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 to 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>");
}
}
}
Use in the page
After you add a reference to the control, you can see the Menucomposite component directly in the toolbox-controls component
You can then use it just like any other ASP.
Use:
Copy CodeThe code is 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 compilation run will generate a no-style UL list, the effect is as follows:
Therefore, to generate a menu item that can be displayed and hidden, the key is to set the two-level submenu to hide Visibility:hidden at the beginning of the CSS setting;
At the same time define Li's hover event, Li:hover: The visibility from the menu should be changed to visible; The general principle is that, of course, the location of the menu item is also noted
The first-level menu float:left so that it can be displayed horizontally.
The CSS is defined as follows:
Copy CodeThe code is 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 one-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; /* Start with 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; /* 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;
}
After defining the CSS, the effect is as follows:
To this menu control has completed. Has been tested can be displayed in Ie7,ie8,chrome,firefox, 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 the complete code, if you need to download and modify your own download file
ASP. NET Menu control
