A La Carte: Make Highly Customized Menus with Ease in ASP.NET 2.0 : Page 2

Drilling Into the Menu Control

Figure 3. Parts of a Menu Control: The figure shows the ASP code that defines a menu, with the various parts labeled.

The Menu control derives from the System.Web.UI.WebControls.HierarchicalDataBoundControl class. This class acts as a logical container for a Menu control. It's convenient to think of Menu controls as consisting of three parts: control properties, item style properties, and items. Figure 3 shows the ASP code that defines a menu with the three parts labeled. Looking at Figure 3, the first section helps you define various properties for the menu control. The second section specifies styles to apply to the various menu item types, and the third section defines the menu items themselves. Note the way the code nests submenu items within the root "Home" menu.

Static and dynamic menus have separate but parallel style properties. Table 1 lists several important Menu control style properties and descriptions. Table 1. Important Menu Control Properties: The menu lists the name and description of several important Menu control style properties and descriptions.

Menu item style	Description
DynamicHoverStyle	This property controls the appearance of a dynamic menu item when the mouse pointer is positioned over it.
DynamicMenuItemStyle	This property controls the appearance of menu items within a dynamic menu.
DynamicMenuStyle	This property controls the appearance of a dynamic menu.
DynamicSelectedStyle	This property controls the appearance of a dynamic menu item when the user selects it from the menu.
StaticHoverStyle	This property controls the appearance of a static menu item when the mouse pointer is positioned over it.
StaticMenuItemStyle	This property controls the appearance of the menu items in a static menu.
StaticMenuStyle	This property controls the appearance of a static menu.
StaticSelectedStyle	This property controls the appearance of a static menu item when the user selects it from the menu.

Take a closer look at the third section in Figure 3—the <items> (Menu Items) section. This section is the core of the Menu control. Each Menu control is made up of a hierarchical tree of menu items, each represented by a MenuItem (corresponding to an element) object. Menu items at the top level (level 0) are called root menu items. In Figure 3, "Home" is the root menu item. A menu item that has a parent menu item is called a child menu item. For example, "ASP.NET Sites" is a child item in Figure 3. The Items collection (the <items> element) holds all the root menu items. Each root menu has a ChildItems collection containing the child menu items.

A MenuItem has four important properties: Text, Value, NavigateUrl, and ImageUrl. The Menu control displays the Text property value as the visible name for each menu item. You use the Value property used to store any additional data about the menu item, such as data it should pass to the PostBack event associated with the menu item. When clicked, a menu item can navigate to another Web page indicated by the NavigateUrl property. If you don't set the NavigateUrl property for a menu item, the Menu control simply submits the page to the server for processing when a user clicks that menu item. You're not limited to text menu items, either; using the ImageUrl property, you can optionally display an image in a menu item rather than a simple text string.

Previous Page

Next Page

---

• Download The Code for this Article

---