Using Images with the Menu Control

Article
10/15/2014

You can use images to indicate additional child menu items available when the mouse pointer is positioned over a menu item. You can also use images to separate static or dynamic menu items, or to serve as a background for the entire menu or for a level of menu items.

You can specify the images to be used and how those images appear using cascading style sheets (CSS) and the properties of the Menu control.

Using the Default Pop-Out Images

You can use either of two properties, or both, to designate the images that indicate child menu items not shown when the Menu control is first rendered. To use the default image to indicate that a static menu item has child items, set the StaticEnableDefaultPopOutImage property to true; to use the default image for a dynamic menu item with child items, set the DynamicEnableDefaultPopOutImage property to true. Setting the value to false for either or both of these properties hides the default black arrow image on each menu item with child items.

The following example sets both values to true so that any static or dynamic menu items that have child items will display the default black arrow image.

    <asp:Menu ID="Menu1" runat="server" 
        StaticEnableDefaultPopOutImage="true"
        DynamicEnableDefaultPopOutImage="true">

Specifying Custom Indicator Icons

To use custom images that you have created for indicator icons, you assign values to the StaticPopOutImageUrl and DynamicPopOutImageUrl properties. Each of these properties specifies a file location and name that indicate the image to be used. The StaticPopOutImageUrl property governs the image used for static menu items, and the DynamicPopOutImageUrl property governs the image used for dynamic menu items.

The following example sets both the static and dynamic indicator icons to the image Greenarrow.gif, located in the Images directory.

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

Specifying Separator Images

Menu items at the same level can be separated from each other by separator images. You can specify separator images that appear above and below menu items in a given level, or for all levels of the static or dynamic menu. Four properties are used to specify separator images, two for the top and bottom separators for static menu items and two for the top and bottom separators for dynamic menu items:

The following example specifies that the Greenseparator.gif image appears below each static menu item.

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

Specifying Scroll Images

If you specify a lot of menu items, the pop-up window used to display dynamic menu items might not expand enough to show all the menu items. The Menu control automatically creates scroll bars so users can scroll through the list of menu items, and you can use the ScrollDownImageUrl and ScrollUpImageUrl properties to assign custom arrows or other images to the up and down icons on the scrollbar.

The following example shows how you would use these two properties to specify custom images for the scrollbar arrows.

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

Specifying Image Size in CSS

How you work with images can significantly impact how they are displayed with a Menu control. For example, when a page is first displayed and the images used on the Menu control have not yet been cached by a browser, these images can appear to flicker or "jump" until the browser determines the image size. By specifying the size of the images used in the Menu control in a cascading style sheet (CSS), you can prevent this from occurring.

If you use an image with a menu item, first assign a class name to the System.Web.UI.WebControls.WebControl.CssClass property of the menu item using the image in the HTML markup. Then, in the CSS, you can indicate the size of the image. The following example assigns the class name "menuitem" to the StaticMenuItemStyle and DynamicMenuItemStyle properties.

<StaticMenuItemStyle CssClass="menuitem" />
<DynamicMenuItemStyle CssClass="menuitem" />

In a CSS file that is referenced by the page containing the menu, you would then reference the menu item's CSS class and set the image size.

The following example references the CSS class "menuitem" and specifies that a 40-pixel-by-40-pixel image is used to indicate when a menu item has child items.

.menuitem {} /*Style code for each menu item goes here. */
.menuitem img 
{
  width: 40px;
  height: 40px;
}

Using Images with the Menu Control

Using the Default Pop-Out Images

Specifying Custom Indicator Icons

Specifying Separator Images

Specifying Scroll Images

Specifying Image Size in CSS

See Also

Tasks

Reference

Concepts

Additional resources