Using CSS and Styles with the Menu Control

  • Article

Almost every aspect of the Menu control's appearance can be managed by using the properties of the Menu control or cascading style sheets (CSS). By understanding which properties control which aspects of the rendering, you can tailor a menu's appearance. This topic introduces the types of styles exposed by the Menu control and suggests some best practices for setting styles with the Menu control.

You can set attributes of the various styles directly in the markup or use a style sheet. The CssClass property can be used to assign a CSS class to a menu style that controls some aspect of the Menu control's appearance. The following example shows how to specify a CssClass property for a number of Menu properties that you can then reference in a style sheet.

<asp:menu id="NavigationMenu2"
  staticdisplaylevels="3"
  orientation="Vertical"
  target="_blank"  
  runat="server"
  CssClass="menu2">
  
<levelsubmenustyles>
  <asp:submenustyle CssClass="level1" />
  <asp:submenustyle CssClass="level2"/> 
  <asp:SubMenuStyle CssClass="level3" />
  </levelsubmenustyles>  
...

Note that it is a best practice to either specify inline styles in the markup or use the CssClass property and specify styles using a style sheet. It is not recommended that you both specify inline styles and use a style sheet, because unexpected behavior could result. For a general discussion of using CSS with server controls, see ASP.NET Web Server Controls and CSS Styles.

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:

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

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.

Another approach to controlling the appearance of menu items is to style each level in the menu structure separately. The Menu control has several properties that act as collections of styles, which means that they can contain style information for each level of a menu structure.

The style properties that you can use to specify the appearance for each level have the word "Level" in their names:

The following example creates a collection of four styles that apply to the first four levels of menu items and could be referenced in a style sheet by using the CssClass value.

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

The first style in the collection applies to the first-level menu items; the second style applies to the second-level menu items, and so on. Note that there is no inheritance between level styles so that styles applied to one level do not affect subsequent levels.

The following example creates a collection of three styles that apply to the first three levels of menu items and could be referenced in a style sheet.

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

Common Menu Styling Scenario

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.

Menu control showing styles applied

See Also

Tasks

Walkthrough: Controlling ASP.NET Menus Programmatically

Concepts

ASP.NET Web Server Controls and CSS Styles
Using Images with the Menu Control