Menu控件的使用

通过任务五学习，你需要掌握和了解以下内容：

1.了解Menu控件的属性介绍

2.掌握Menu控件使用

【案例一】

制作某校园网站导航菜单，效果如图1-1所示。

图1-1

【具体步骤】

（1）创建菜单项。在页面中添加一个Menu控件，通过右上角智能标记菜单中选择【编辑菜单项】选项，如图1-2所示。选择此菜单项后，弹出【菜单项编辑器】对话框，如图1-3所示。

图1-2

图1-3

 编辑完成后，在默认情况下，菜单将显示如图1-4所示的效果。

图1-4

（2）修改菜单项的样式。

①首先创建一个样式文件“style.css”

在页面的前台Html代码中链接Style.css文件

②创建LevelMenuItemStyles。在样式文件中主要定义了三个样式，分别定义了第一层菜单项、第二层菜单项和鼠标在菜单项上悬浮时的样式。定义完样式后，修改Menu控件的“LevelMenuItemStyles”属性，如图1-5所示。

图1-5

单击【选择】按钮，弹出【MenuItemStyles集合编辑器】对话框，首先单击【添加】按钮，添加菜单项的样式“MenuItemStyle”，根据菜单的层次，选择对应的CssClass，如图1-6所示。

图1-6

③设置链接。在菜单项编辑器中，选择菜单项，在右边的属性栏中，直接设置“NavigateUrl”属性为相应的页面即可，如图1-7所示。

图1-7

【背景知识】

（1）Menu控件的StaticDisplayLevels属性。StaticDisplayLevels属性用来设置静态显示多少层菜单项。如果有四层菜单项，并且StaticDisplayLevels属性设置为3，则静态显示前三层，动态显示最后一层菜单项。

（2）控制菜单的外观。

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

①StaticMenuStyle；

②StaticMenuItemStyle；

③StaticSelectedStyle；

④StaticHoverStyle。

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

①DynamicMenuStyle；

②DynamicMenuItemStyle；

③DynamicSelectedStyle；

④DynamicHoverStyle。

（3）菜单层。控制菜单项的外观的另一种方法是单独设置菜单结构中每层的样式。Menu控件具有多个充当样式集合的属性，这意味着这些属性可以包含菜单结构的每层的样式信息。可用于指定每层外观的样式属性在其名称中包含单词“Level”：

①LevelMenuItemStyles；

②LevelSubMenuStyles；

③LevelSelectedStyles。 

（4）使用数据源。Menu控件与TreeView控件一样，也可以绑定到其他数据源控件上。例如，在前面TreeView中使用的“product.xml”文件，通过创建XmlDataSource数据源进行绑定，通过菜单DataBindings编辑器进行编辑，如图1-8所示。

图1-8

程序运行效果如图1-9所示。

图1-9