The Menu control uses two modes of display: static and dynamic. Static display means that part or all of the menu structure is always visible. A completely static menu displays the entire menu structure, and a user can click any part of it. Dynamic display means that portions of the menu structure appear as the mouse pointer is positioned over certain items; child menu items are displayed only when the user holds the mouse pointer over a parent node.

The StaticDisplayLevels property dictates how many levels of menu items are displayed statically. If you have four levels of menu items and the StaticDisplayLevels property is set to 3, the first three levels are displayed statically and the last level of menu items is displayed dynamically.

To control the appearance of the static portion of the menu, you can use the style properties with the word "Static" in the name:

• StaticMenuStyle

• StaticMenuItemStyle

• StaticSelectedStyle

• StaticHoverStyle

To control the appearance of the dynamic portion of the menu, you can use the style properties with the word "Dynamic" in the name:

• DynamicMenuStyle

• DynamicMenuItemStyle

• DynamicSelectedStyle

• DynamicHoverStyle

The StaticMenuStyle and DynamicMenuStyle properties affect the entire set of static or dynamic menu items, respectively. For example, if you specified a border using the DynamicMenuStyle property, the entire dynamic region would have a border.

Contrast this behavior with the StaticMenuItemStyle and DynamicMenuItemStyle properties. These properties affect individual menu items. For example, if you specified a border using the DynamicMenuItemStyle property, each dynamic menu item would have its own border.

The StaticSelectedStyle and DynamicSelectedStyle properties affect only the selected menu item, and the StaticHoverStyle and DynamicHoverStyle properties affect the style of the menu item when the mouse pointer is positioned over the menu item.

Menu Levels

  <LevelMenuItemStyles>
    <asp:MenuItemStyle CssClass="Level1Style" />
    <asp:MenuItemStyle CssClass="Level2Style" />
    <asp:MenuItemStyle CssClass="Level3Style" />
    <asp:MenuItemStyle CssClass="Level4Style" />
  </LevelMenuItemStyles>

  <LevelSubMenuStyles>
    <asp:SubMenuStyle CssClass="submenulevel1" />
    <asp:SubMenuStyle CssClass="submenulevel2" />
    <asp:SubMenuStyle CssClass="submenulevel3" />
  </LevelSubMenuStyles>

The styles you use to format a Menu control depend on how much and where you want control over the appearance of the menu items. For example, if you want each menu item level to have a consistent look, use the LevelMenuItemStyles property to style each menu level. If you want all static menu items to look the same and all dynamic menu items to look the same, you can use the StaticMenuItemStyle property to control the appearance of all static menu items and the DynamicMenuItemStyle property to control the appearance of all dynamic menu items.

The following example shows the markup and style sheet contents necessary to create a specific menu. This example demonstrates some best practices when using the Menu control, including:

The Menu control property Font is used in the markup to set the font for the overall menu.

• The width of the control is set by the Width Menu control property.

• The LevelMenuItemStyles property is used to specify the style for each menu item level.

• The !important declaration is used in the style sheet to override the default font for the menu.

The following example provides the declarative code for the menu control.

<asp:menu id="NavigationMenu1" CssClass="menu1"
  staticdisplaylevels="3"
  staticsubmenuindent="0" 
  orientation="Vertical"
  target="_blank"
  Font-names="Arial, Gill Sans"
  Width="100px"
  runat="server">

  <LevelMenuItemStyles>
    <asp:MenuItemStyle CssClass="level1"/>
    <asp:MenuItemStyle CssClass="level2"/>
    <asp:MenuItemStyle CssClass="level3" />
  </LevelMenuItemStyles>
  
  <StaticHoverStyle CssClass="hoverstyle"/>
  
  <LevelSubMenuStyles>
    <asp:SubMenuStyle CssClass="sublevel1" />
  </LevelSubMenuStyles>
  
  <items>
    <asp:menuitem text="Home" tooltip="Home">
    <asp:menuitem text="Section 1" tooltip="Section 1">
      <asp:menuitem text="Item 1" tooltip="Item 1"/>
      <asp:menuitem text="Item 2" tooltip="Item 2"/>
      <asp:menuitem text="Item 3" tooltip="Item 3"/>
    </asp:menuitem>
    <asp:menuitem text="Section 2" tooltip="Section 2">
      <asp:menuitem text="Item 1" tooltip="Item 1"/>
      <asp:menuitem text="Item 2" tooltip="Item 2">
        <asp:MenuItem Text="Subitem 1"/>
        <asp:menuitem Text="Subitem 2" />
      </asp:menuitem>
      <asp:menuitem text="Item 3" tooltip="Item 3"/>
    </asp:menuitem>
  </asp:menuitem>
  </items>
</asp:menu>

The following example is the CSS code for the menu control.

.level1
{
    color: White;
    background-color: Black;
    font-variant: small-caps;
    font-size: large;
    font-weight: bold;
}

.level2
{
    color: Blue;
    font-family: Gill Sans MT !important;
    font-size: medium;
    background-color: Gray;
}

.level3
{
    color: black;
    background-color: Silver;
    font-family: Gill Sans MT !important;
    font-size: small;
}

.hoverstyle
{
    font-weight: bold;
}
       
.sublevel1
{
    background-color: Gray !important;
    color: White !important;
    font-variant: small-caps;
}  

The final Menu control is shown in the following illustration.

Tasks

Concepts