home / samples / background images

Background Images

Both menus and items can now include background images. The above permanently displayed menu utilizes a gray gradient background image. Since child menus can be styled independently of their parents, the child menus needn't inherit the same background image that the permanent menu does.

In addition to specifying the image itself, you can also specify the CSS properties of the background image; such as positioning (top, right, etc.) and repeating.

Admittedly, tiled images work best for menus, since they can be repeated regardless of how tall or wide the menu items make your menus. But if you're careful, fixed images can also be used to produce interesting effects, such as the curved edges of the permanently displayed menu to the left of this paragraph.

Be careful with item background images in Internet Explorer 4, which we've found can produce inconsistent results. The menu to the left for example, would not render properly in Internet Explorer 4; requiring us to force the image to not show in that browser; i.e.:

ItemBackgroundImage:(HM_IE4)?null:"curve1.gif",

Finally, though not a native capability of HierMenus, note that it is also possible to setup menu items such that background images are swapped when the menu item is highlighted (rolled over, forced to be permanently highlighted via IsPermHilite, or forced to be permanently selected via IsSelected). To accomplish this, you must utilize HM's ability to style menu items via class name assignments, and then assign the appropriate background images to the style sheet definitions for the class names that you will assign to the menu items.

Consider the menu below, which is similar to the menu at the top of the page:

In this menu, we've set the menu items to initially display a background image (again, we've elected to not support IE4 with this technique) via their default class name assignments (ItemClass), but assigned a different background image to the over and selected class names for the menu items (ItemClassOver, and ItemClassSelected). This results in the swapping of the background images as the item class names themselves are swapped for the menu items. Here are the style sheet rules we assigned to the menu item class names:

.hm_item     {color:black; background:#efefef url('bg_blue.gif')}
.hm_itemOver {color:black; background:#efefef url('bg_yellow.gif')}

See the Using Classes Mini-Tutorial for specific information pertaining to the use of style sheet classes with HierMenus; and for further information on the standard use of background images in HM, check out the reference entries for these configuration parameters:

ItemBackgroundImage
ItemBackgroundProperties
MenuBackgroundImage
MenuBackgroundProperties

Click the link below to have a look at the configuration file we used to generate these sample menus:

bgimages.js