home / bulletins / 9 / page 3

[previous] [next]

More Choices for "More" Images

In previous versions of HierMenus, the vertical alignment of the "more" image (the image that is displayed next to a menu item to indicate the existence of a child menu for that item) was controlled entirely by the HM_GL_ImageVertSpace and HM_PG_ImageVertSpace parameters. As originally defined, HM_ImageVertSpace allowed only for the specification of an integer, which would be interpreted as pixels and would designate the distance from the top of the menu item where the more image should be placed. Or, in other words:

Beginning with HM 5.3, "more" images can be automatically positioned to the top, middle, or bottom of the menu item, in addition to the exact numeric specification as supported in previous HM versions. To accommodate this new behavior, a new parameter configuration is being introduced, and the existing HM_ImageVertSpace parameter is being slightly redefined.

 HM_GL_ImageHeight and HM_PG_ImageHeight

Description:

The height, in pixels, of the designated more image.

Value:

Pixels, expressed as integers or any JS expression that returns an integer value.

Comments:

ImageHeight was introduced in HM version 5.3.

You should avoid creating generically sized more images and then sizing them differently using HM_ImageSize and HM_ImageHeight, as this is inefficient for the browser. Rather, create your more images to the exact dimensions that you require, and then set HM_ImageSize and HM_ImageHeight to those specific dimensions.

Example:

The more image should be displayed with a height of 10px:

HM_GL_ImageHeight = 10;

Default:

9, the same height as the "more" images supplied in the HM distribution.

 HM_GL_ImageVertSpace and HM_PG_ImageVertSpace

Description:

The distance, in pixels, between the top of the more image and the lower edge of the menu item's padding:



-- OR --

One of three specific keywords, enclosed in quotes, indicating the vertical alignment of the more image:

• top: more image should be positioned at the top of the menu item
• middle: more image should be centered vertically in the menu item
• bottom: more image should be positioned at the bottom of the menu item

Value:

Pixels, expressed as integers or any JS expression that returns an integer value; or one of the three strings top, middle or bottom, enclosed in quotes.

Comments:

HM versions prior to 5.3 recognize only pixel positioning and will not allow top, middle, or bottom positioning.

If any string other than top, middle, or bottom is specified, and that string cannot be converted to a number, then top will be assumed.

Note that setting HM_ImageHeight to top is the same as setting it to 0 (zero). The top keyword is provided purely for consistency.

When using the keywords, enclose them in quotes. Numeric entries may be quoted or unquoted.

Examples:

More images should be vertically positioned in the middle of the menu items:

HM_GL_ImageVertSpace = "middle";

More images should always be displayed 3 pixels from the lower edge of the menu item's padding:

HM_PG_ImageVertSpace = 3;

Default:

middle. Prior to HM v5.3, the default was 0 (top).

Since we suspect that middle will be a popular choice for more image positions, we're designating this new keyword as the default for HM_ImageVertSpace, replacing the previous default of zero (which is also now the same as top). Therefore, if you're upgrading from a previous HM version, you might need to adjust your HM_ImageVertSpace settings.

The combination of the above two parameters allows you to consistently center the more images within a menu item when the exact height of the menu items themselves is not known (for example, if you are unsure as to which menu items will require line breaks). middle can now also be gracefully applied without regard to font rendering differences between various platforms and browsers. When setting HM_GL_ImageVertSpace to middle, HM will place the more image in the center of the menu item after the browser has already rendered it; i.e., in the center of the actual item as rendered by the browser, without requiring authors to "guess" where the more image should be positioned. The following example link demonstrates this. When rolling over the link, a popup menu will be displayed. In this menu, the first two items rendered will be different heights; yet the more image is positioned in the center of each of them: [Because our navigation menus on the left are being generated by HierMenus version 6, the example below must also be generated by HierMenus version 6. But the positioning effect is the same in HierMenus 5.3. -Ed]

More Image Example

One final set of new behaviors was introduced in HM 5.3, all related to HM's new ability to properly follow directions.

[previous] [next]