asp.net --- Menu控件\CSS 和样式
几乎 Menu 控件外观的各个方面都可以使用 Menu 控件的属性或级联样式表 (CSS) 来管理。通过了解哪些属性控制呈现的哪些方面，可以定制菜单的外观。本主题介绍由 Menu 控件公开的样式类型，并建议一些使用 Menu 控件设置样式的最佳做法。
可以直接在标记中设置各种样式的属性或使用样式表。CssClass 属性可用于为菜单样式分配 CSS 类，该样式控制 Menu 控件外观的某些方面。下面的示例演示如何为许多 Menu 属性（然后可以在样式表中引用这些属性）指定一个 CssClass 属性。
<asp:menu
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
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;
}