|Important||This document may not represent best practices for current development, links to downloads and other resources may no longer be valid. Current recommended version can be found here.|
Menu Control Overview
The ASP.NET Menu control allows you to develop both statically and dynamically displayed menus for your ASP.NET Web pages.
This topic contains:
The Menu control has two modes of display: static and dynamic. Static display means that the Menu control is fully expanded all the time. The entire structure is visible, and a user can click on any part. In a dynamically displayed menu, only the portions you specify are static, while their child menu items are displayed when the user holds the mouse pointer over the parent node.
You can configure the contents of the Menu control directly in the control, or you can specify the contents by binding the control to a data source. Without writing any code, you can control the appearance, orientation, and content of an ASP.NET Menu control. In addition to the visual properties exposed by the control, the control supports ASP.NET control skins and themes. For more information on skins and themes, see ASP.NET Themes and Skins Overview.
Static Display Behavior
You can control static display behavior by using the StaticDisplayLevels property of the Menu control. The StaticDisplayLevels property indicates how many levels to display statically from the root of the menu. For example, if StaticDisplayLevels is set to 3, your menu will be expanded to statically display its first three levels. The minimum static display level is 1, and the control will throw an exception if the value is set to 0 or a negative number.
Dynamic Display Behavior
The MaximumDynamicDisplayLevels property specifies how many levels of dynamically appearing menu nodes should be displayed after the static display level. For example, if your menu has a static level of 3 and a dynamic level of 2, the first three levels of your menu would be statically displayed, while the next two levels would be dynamic.
Defining Menu Content
Adding Menu Items Manually
You can add individual menu items to the control by specifying them in the Items property. The Items property is a collection of MenuItem objects. The following example shows the declarative markup for a Menu control with three items, each of which has two child items:
<asp:Menu ID="Menu1" runat="server" StaticDisplayLevels="3"> <Items> <asp:MenuItem Text="File" Value="File"> <asp:MenuItem Text="New" Value="New"></asp:MenuItem> <asp:MenuItem Text="Open" Value="Open"></asp:MenuItem> </asp:MenuItem> <asp:MenuItem Text="Edit" Value="Edit"> <asp:MenuItem Text="Copy" Value="Copy"></asp:MenuItem> <asp:MenuItem Text="Paste" Value="Paste"></asp:MenuItem> </asp:MenuItem> <asp:MenuItem Text="View" Value="View"> <asp:MenuItem Text="Normal" Value="Normal"></asp:MenuItem> <asp:MenuItem Text="Preview" Value="Preview"></asp:MenuItem> </asp:MenuItem> </Items> </asp:Menu>
Data Binding to an XML Data Source
Binding to an XML file allows you to control the menu's content through edits to the file, rather than by using the designer. This allows you to update the navigational aspect of your site without revisiting the Menu control or editing any code. If you have a site with changing content, an XML file can be used to organize the content, and fed to the Menu control to make sure the content is accessible to users of the Web site.
Appearance and Behavior
You can adjust the behavior of the Menu control through its properties. Additionally, you can control the behavior of dynamic display, including the amount of time a menu node remains visible once it is displayed. For example, to change the Menu orientation from horizontal to vertical, you can set the Orientation property as follows:
Menu.Orientation = Orientation.Vertical
Menu.Orientation = Orientation.Vertical;
Setting the property to Orientation.Horizontal changes the orientation back to horizontal.
Each menu level supports style properties. If no dynamic style properties are set, the static style properties are used. If dynamic style properties are set and no static style properties are set, the default rendering of static style properties is used. The Menu control style hierarchy is as follows:
These styles are merged across dynamic and static menus by using the following logic:
Each individual style is applied to the appropriate action or item type.
All styles are a merged into the style preceding them in the hierarchy, with the last style overriding.
Static menus never merge and dynamic style is applied if a static style is not defined.
Dynamic Appearance Timing
One aspect of a dynamic menu is the amount of time it takes for the dynamically appearing portion of a menu to disappear. This value is configurable in milliseconds by adjusting the DisappearAfter property as follows:
Menu.DisappearAfter = 1000
Menu.DisappearAfter = 1000;
The default value is 500 milliseconds. If the value of DisappearAfter is set to 0, pausing outside of the Menu control causes it to disappear immediately. Setting the value to -1 indicates that the pause time should be infinite, and only by clicking outside of the Menu control will the dynamic portion vanish.
Using the Menu Control with UpdatePanel Controls
UpdatePanel controls are used to update selected regions of a page instead of updating the whole page with a postback. The Menu control can be used inside an UpdatePanel control with the restriction that styles must be applied by using a reference to a Cascading Style Sheet (CSS) class. For example, instead of setting the DynamicHoverStyle property by using a property-subproperty attribute, set the style by using the property-CssClass attribute. Similarly, when you use the DynamicHoverStyle template to set a style, use the CssClass attribute of the template.
The following table lists the classes that relate to the Menu control.
The main class for the control.
Represents a menu item displayed in the Menu control.
Defines the relationship between a data item and the menu item it is binding to in a Menu control.
Represents a collection of MenuItemBinding objects.
Represents a collection of menu items in a Menu control.
Represents the style of a menu item in a Menu control.