ASP.NET - 将图像用于 Menu 控件

 

      可以使用图像来在鼠标指针悬停于菜单项上方时指示存在可用子菜单项。还可以使用图像来区分静态和动态菜单项，或用图像充当整个菜单或某个级别的菜单项的背景。

可以使用级联样式表 (CSS) 和 Menu 控件的属性来指定要使用的图像，以及这些图像的显示方式。

 

一、使用默认的弹出图像

可以使用这两个属性或其中一个属性来指定，用于指示在首次呈现 Menu 控件时不显示子菜单项的图像。若要使用默认图像来指示某个静态菜单项包含子项，请将 StaticEnableDefaultPopOutImage 属性设置为 true；若要使用默认图像指示某个动态菜单项包含子项，请将 DynamicEnableDefaultPopOutImage 属性设置为 true。将这两个属性或其中一个属性的值设置为 false，会隐藏每个有子项的菜单项上的默认黑箭头图像。

下面的示例将这两个值都设置为 true，因此，任何有子项的静态或动态菜单项都会显示默认的黑箭头图像。

    <asp:Menu ID="Menu1" runat="server"

        StaticEnableDefaultPopOutImage="true"

        DynamicEnableDefaultPopOutImage="true">

 

二、指定自定义指示器图标

若要使用您为指示器图标创建的自定义图像，请为 StaticPopOutImageUrl 和 DynamicPopOutImageUrl 属性赋值。每个属性指定一个用于指示要使用的图像的文件位置和名称。StaticPopOutImageUrl 属性控制用于静态菜单项的图像，DynamicPopOutImageUrl 属性控制用于动态菜单项的图像。

下面的示例将静态和动态指示器图标都设置为 Images 目录中的图像 Greenarrow.gif。

<asp:Menu ID="Menu1" Runat="server" StaticPopOutImageUrl="~/images/greenarrow.gif"

        DynamicPopOutImageUrl="~/images/greenarrow.gif">

 

三、指定分隔符图像

可以使用分隔符图像将同一级别的菜单项彼此分隔开来。可以指定显示在静态或动态菜单的给定级别或全部级别的菜单项之上/下的分隔符图像。可以使用四个属性指定分隔符图像，两个用于静态菜单项的顶部和底部分隔符，两个用于动态菜单项的顶部和底部分隔符：

·StaticTopSeparatorImageUrl

·StaticBottomSeparatorImageUrl

·DynamicTopSeparatorImageUrl

·DynamicBottomSeparatorImageUrl

下面的示例指定 Greenseparator.gif 图像显示在每个静态菜单项的下面。

    <asp:Menu ID="Menu2" Runat="server" StaticBottomSeparatorImageUrl="~/greenseparator.gif">

 

四、指定滚动图像

如果指定了许多菜单项，用于显示动态菜单项的弹出窗口可能无法显示所有菜单项。Menu 控件会自动创建滚动条，以便用户能滚动浏览菜单项列表；可以使用 ScrollDownImageUrl 和 ScrollUpImageUrl 属性将自定义箭头或其他图像分配给滚动条上的向上和向下图标。

下面的示例演示如何使用这两个属性来为滚动条箭头指定自定义图像。

    <asp:Menu ID="Menu1" Runat="server" ScrollUpImageUrl="~/images/greenuparrow.gif"

        ScrollDownImageUrl="~/images/greenuparrow.gif"

 

五、在 CSS 中指定图像大小

图像的使用方式可能会显著影响 Menu 控件显示该图像时的效果。例如，在首次显示某个页面时，如果浏览器尚未缓存 Menu 控件所使用图像，在浏览器确定这些图像的大小之前，它们呈闪烁或“跳动”状态。通过在级联样式表 (CSS) 中指定 Menu 控件所使用图像的大小，可以避免此类情况。

如果要对一个菜单项使用图像，请首先在 HTML 标记中为使用图像的菜单项的 WebControl..::.CssClass 属性分配类名。然后，在 CSS 中指示图像的大小。下面的示例将类名“menuitem”分配给 StaticMenuItemStyle 和 DynamicMenuItemStyle 属性。

<StaticMenuItemStyle CssClass="menuitem" />

<DynamicMenuItemStyle CssClass="menuitem" />

然后，在包含菜单的页所引用 CSS 文件中，您可以引用该菜单项的 CSS 类并设置图像大小。

下面的示例引用 CSS 类“menuitem”，并指定当菜单项有子项时用 40*40 像素的图像来指示。

.menuitem {} /*Style code for each menu item goes here. */

.menuitem img

{

  width: 40px;

  height: 40px;

}