将 CSS 和样式用于 Menu 控件

项目
10/22/2014

更新：2007 年 11 月

几乎 Menu 控件外观的各个方面都可以使用 Menu 控件的属性或级联样式表 (CSS) 来管理。通过了解哪些属性控制呈现的哪些方面，可以定制菜单的外观。本主题介绍由 Menu 控件公开的样式类型，并建议一些使用 Menu 控件设置样式的最佳做法。

可以直接在标记中设置各种样式的属性或使用样式表。CssClass 属性可用于为菜单样式分配 CSS 类，该样式控制 Menu 控件外观的某些方面。下面的示例演示如何为许多 Menu 属性（然后可以在样式表中引用这些属性）指定一个 CssClass 属性。

<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>  
...

请注意，最佳做法是在标记中指定内联样式或使用 CssClass 属性并使用样式表指定样式。不建议同时指定内联样式和使用样式表，因为可能会导致意外行为。有关将 CSS 用于服务器控件的一般讨论，请参见 ASP.NET Web 服务器控件和 CSS 样式。

菜单行为和样式

Menu 控件使用两种显示模式：静态模式和动态模式。静态显示意味着部分或全部菜单结构始终可见。完全静态的菜单显示整个菜单结构，用户可以单击其任何部分。动态显示意味着当鼠标指针置于某些项上时显示部分菜单结构；仅当用户将鼠标指针放置在父节点上时才会显示子菜单项。

StaticDisplayLevels 属性指示静态显示多少层菜单项。如果有四层菜单项，并且 StaticDisplayLevels 属性设置为 3，则静态显示前三层，动态显示最后一层菜单项。

若要控制菜单的静态部分的外观，可以在名称中使用包含单词“Static”的样式属性：

若要控制菜单的动态部分的外观，可以在名称中使用包含单词“Dynamic”的样式属性：

StaticMenuStyle 和 DynamicMenuStyle 属性分别影响整组静态或动态菜单项。例如，如果使用 DynamicMenuStyle 属性指定一个边框，则整个动态区域将会有一个边框。

StaticMenuItemStyle 和 DynamicMenuItemStyle 属性与此行为相反。这两个属性影响单个菜单项。例如，如果使用 DynamicMenuItemStyle 属性指定一个边框，则每个动态菜单项都有它自己的边框。

当鼠标指针置于菜单项上时，StaticSelectedStyle 和 DynamicSelectedStyle 属性仅影响所选的菜单项，而 StaticHoverStyle 和 DynamicHoverStyle 属性影响菜单项的样式。

菜单层

控制菜单项的外观的另一种方法是单独设置菜单结构中每层的样式。Menu 控件具有多个充当样式集合的属性，这意味着这些属性可以包含菜单结构的每层的样式信息。

可用于指定每层外观的样式属性在其名称中包含单词“Level”：

下面的示例创建一个四种样式的集合，这些样式适用于前四层菜单项，并且可以通过使用 CssClass 值在样式表中引用。

  <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>

菜单样式常见情况

用于设置 Menu 控件格式的样式取决于对菜单项的外观进行控制的程度和位置。例如，如果希望每个菜单项层都有一个一致的外观，请使用 LevelMenuItemStyles 属性来设置每个菜单层的样式。如果希望所有静态菜单项的外观都相同，所有动态菜单项的外观也都相同，则可以使用 StaticMenuItemStyle 属性来控制所有静态菜单项的外观，使用 DynamicMenuItemStyle 属性来控制所有动态菜单项的外观。

下面的示例演示创建特定菜单所需的标记和样式表内容。本示例演示使用 Menu 控件时的一些最佳做法，包括：

在标记中使用 Menu 控件属性 Font 设置整个菜单的字体。

通过 Width Menu 控件属性设置控件的宽度。
使用 LevelMenuItemStyles 属性为每个菜单项层指定样式。
在样式表中使用 !important 声明重写菜单的默认字体。

下面的示例提供 Menu 控件的声明性代码。

<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>

下面的示例是 Menu 控件的 CSS 代码。

.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;
}

最终的 Menu 控件如下图所示。

显示所应用的样式的 Menu 控件