ASP.NET - 将 CSS 和样式用于 Menu 控件

几乎 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 属性并使用样式表指定样式。不建议同时指定内联样式和使用样式表，因为可能会导致意外行为

一、菜单行为和样式

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

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

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

·StaticMenuStyle

·StaticMenuItemStyle

·StaticSelectedStyle

·StaticHoverStyle

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

·DynamicMenuStyle

·DynamicMenuItemStyle

·DynamicSelectedStyle

·DynamicHoverStyle

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

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

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

1.1、菜单层

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

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

·LevelMenuItemStyles

·LevelSubMenuStyles

·LevelSelectedStyles

下面的示例创建一个四种样式的集合，这些样式适用于前四层菜单项，并且可以通过使用 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 设置整个菜单的字体。

·通过 WidthMenu 控件属性设置控件的宽度。

·使用 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;

}