You can manage the Menu control appearance by using styles provided by it. Like the TreeView, the Menu derives two custom classes from the Style base class – MenuStyle and MenuItemStyle. These styles add spacing properties ItemSpacing, HorizontalPadding and VerticalPadding. Because there is no ImageUrl property, you cannot set menu item images through the style.
The Menu supports defining different menu styles for different menu items, which are two types:
– Static items – the root level items that are displayed in the page when it’s first generated
– Dynamic items – the items in fly-out menus that are added when the user moves the mouse over a portion of the menu
The Menu supports this, by defining two parallel sets of styles, one that applies to static items and one that applies to dynamic items. The next table list styles you can apply to static and dynamic items:
|
Static Style |
Dynamic Style |
Description |
| StaticMenuStyle | DynamicMenuStyle |
Sets the appearance of the overall “box” in which all the menu items appear. In the case of StaticMenuStyle, this box is shown on the page, whereas with DynamicMenuStyle it’s shown as a pop-up. |
| StaticMenuItemStyle | DynamicMenuItemStyle | Sets the appearance of individual menu items. |
| StaticSelectedStyle | DynamicSelectedStyle |
Sets the appearance of the selected item. Note: The selected item isn’t the item that’s currently being hovered over. It’s the item that was previously clicked (and triggered the last postback). |
| StaticHoverStyle | DynamicHoverStyle |
Sets the appearance of the item that the user is hovering over with the mouse. |
Along with these styles, you can set level-specific styles so that each level of menu and submenu is different. You do this using three collections: LevelMenuItemStyles, LevelSubMenuStyles, and LevelSelectedStyles. These collections apply to ordinary menus, menus that contain other items, and selected menu items, respectively.