《将 css 和样式用于 menu 控件》由会员分享,可在线阅读,更多相关《将 css 和样式用于 menu 控件(8页珍藏版)》请在金锄头文库上搜索。
1、将将 CSSCSS 和样式用于和样式用于 MenuMenu 控件控件将 CSS 和样式用于 Menu 控件 请参见 发送反馈意见 几乎 Menu 控件外观的各个方面都可以使用 Menu 控件的属性或级联样式表 (CSS) 来管理。通过了解哪些属性控制呈现的哪些方面,可以定制菜单的外观。本主题介绍由 Menu 控件公开的样式类型,并建议一些使用 Menu 控件设置样式的最佳做法。可以直接在标记中设置各种样式的属性或使用样式表。CssClass 属性可用于为菜单样式分配 CSS 类,该样式控制 Menu 控件外观的某些方面。下面的示例演示如何为许多 Menu 属性(然后可以在样式表中引用这些属性)
2、指定一个 CssClass 属性。复制代码 .请注意,最佳做法是在标记中指定内联样式或使用 CssClass 属性并使用样式表指定样式。不建议同时指定内联样式和使用样式表,因为可能会导致意外行为。有关将 CSS 用于服务器控件的一般讨论,请参见 ASP.NET Web 服务器控件和 CSS 样式。菜单行为和样式Menu 控件使用两种显示模式:静态模式和动态模式。静态显示意味着部分或全部菜单结构始终可见。完全静态的菜单显示整个菜单结构,用户可以单击其任何部分。动态显示意味着当鼠标指针置于某些项上时显示部分菜单结构;仅当用户将鼠标指针放置在父节点上时才会显示子菜单项。StaticDisplayLe
3、vels 属性指示静态显示多少层菜单项。如果有四层菜单项,并且 StaticDisplayLevels 属性设置为 3,则静态显示前三层,动态显示最后一层菜单项。若要控制菜单的静态部分的外观,可以在名称中使用包含单词“Static”的样式属性:StaticMenuStyle StaticMenuItemStyle StaticSelectedStyle StaticHoverStyle 若要控制菜单的动态部分的外观,可以在名称中使用包含单词“Dynamic”的样式属性:DynamicMenuStyle DynamicMenuItemStyle DynamicSelectedStyle Dyna
4、micHoverStyle StaticMenuStyle 和 DynamicMenuStyle 属性分别影响整组静态或动态菜单项。例如,如果使用 DynamicMenuStyle 属性指定一个边框,则整个动态区域将会有一个边框。StaticMenuItemStyle 和 DynamicMenuItemStyle 属性与此行为相反。这两个属性影响单个菜单项。例如,如果使用 DynamicMenuItemStyle 属性指定一个边框,则每个动态菜单项都有它自己的边框。当鼠标指针置于菜单项上时,StaticSelectedStyle 和 DynamicSelectedStyle 属性仅影响所选的菜
5、单项,而 StaticHoverStyle 和 DynamicHoverStyle 属性影响菜单项的样式。菜单层控制菜单项的外观的另一种方法是单独设置菜单结构中每层的样式。Menu 控件具有多个充当样式集合的属性,这意味着这些属性可以包含菜单结构的每层的样式信息。可用于指定每层外观的样式属性在其名称中包含单词“Level”:LevelMenuItemStyles LevelSubMenuStyles LevelSelectedStyles 下面的示例创建一个四种样式的集合,这些样式适用于前四层菜单项,并且可以通过使用 CssClass 值在样式表中引用。复制代码 集合中的第一种样式适用于第一层
6、菜单项;第二种样式适用于第二层菜单项,依此类推。请注意,层样式之间不存在任何继承,以便应用于一个层的样式不会影响后续层。下面的示例创建一个三种样式的集合,这些样式适用于前三层菜单项,并且可以在样式表中引用。复制代码 菜单样式常见情况用于设置 Menu 控件格式的样式取决于对菜单项的外观进行控制的程度和位置。例如,如果希望每个菜单项层都有一个一致的外观,请使用 LevelMenuItemStyles 属性来设置每个菜单层的样式。如果希望所有静态菜单项的外观都相同,所有动态菜单项的外观也都相同,则可以使用 StaticMenuItemStyle 属性来控制所有静态菜单项的外观,使用 Dynamic
7、MenuItemStyle 属性来控制所有动态菜单项的外观。下面的示例演示创建特定菜单所需的标记和样式表内容。本示例演示使用 Menu 控件时的一些最佳做法,包括:在标记中使用 Menu 控件属性 Font 设置整个菜单的字体。通过 Width Menu 控件属性设置控件的宽度。使用 LevelMenuItemStyles 属性为每个菜单项层指定样式。在样式表中使用 !important 声明重写菜单的默认字体。下面的示例提供 Menu 控件的声明性代码。复制代码 下面的示例是 Menu 控件的 CSS 代码。复制代码 .level1color: White;background-color:
8、 Black;font-variant: small-caps;font-size: large;font-weight: bold;.level2color: Blue;font-family: Gill Sans MT !important;font-size: medium;background-color: Gray;.level3color: black;background-color: Silver;font-family: Gill Sans MT !important;font-size: small;.hoverstylefont-weight: bold;.sublevel1background-color: Gray !important;color: White !important;font-variant: small-caps; 最终的 Menu 控件如下图所示。请参见概念演练:以编程方式控制 ASP.NET 菜单ASP.NET Web 服务器控件和 CSS 样式将图像用于 Menu 控件发送反馈意见,就此主题向 Microsoft 发送反馈意见。