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:

• Background

• Code Examples

• Class Reference

Background

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.

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.

If MaximumDynamicDisplayLevels is set to 0, no menu nodes will be dynamically displayed. If the MaximumDynamicDisplayLevels is set to a negative number, an exception is thrown.

Defining Menu Content

You can define content for the Menu control in two ways: by adding individual MenuItem objects (declaratively or programmatically), and by data binding the control to an XML data source.

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:

[Visual Basic]

Menu.Orientation = Orientation.Vertical

[C#]

Menu.Orientation = Orientation.Vertical;

Setting the property to Orientation.Horizontal changes the orientation back to horizontal.

You can set individual properties of the Menu control to specify the size, color, font, and other characteristics of its appearance. In addition, you can apply skins and themes to the Menu control.

Style

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:

1. Control

2. SubMenuStyles

3. MenuItemStyles

4. SelectedItemStyles

5. HoverMenuItemStyles

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.

  Note

  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:

[Visual Basic]

Menu.DisappearAfter = 1000

[C#]

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.

For more information about using UpdatePanel controls, see UpdatePanel Control Overview and Partial-Page Rendering Overview.

Code Examples

Using CSS and Styles with the Menu Control

Using Images with the Menu Control

Walkthrough: Displaying a Menu on Web Pages

Walkthrough: Controlling ASP.NET Menus Programmatically

Back to top

Class Reference

The following table lists the classes that relate to the Menu control.

Back to top

See Also

Reference

Menu

Other Resources

ASP.NET Site Navigation

Navigation Toolbox Controls