home / bulletins / 13

[next]

Status Report: HierMenus Version 6 Sneak Preview

D.M Ragle, March 3, 2004

Our HierMenus script continues to improve, thanks in no small part to suggestions made by you, our customers (both current and future). Version 6 of HierMenus, which we're in the process of wrapping up as I type this, is chock full of improvements as a direct result of requests you've made of us over the years. We're pleased to offer a sneak preview of what you can expect in the next version of our popular menu navigation script.

As a reminder, though our release articles can be appreciated by and may be useful to all DHTML developers and HierMenus fans, the HierMenus script itself is a licensed product and its use on your site(s) requires a paid license agreement. Contact Barry Pullen or call him at (203) 662-2868 for further information (be sure to let him know how you plan to use HierMenus and tell him a bit about your organization, as well).

Menu and Item Specific Parameter Settings

In past versions of HierMenus, configuration parameters were limited to global, page-specific, or menu tree-specific settings. (In a few specific instances, parameters could also be differentiated between top level menus in a menu tree and all of the tree's children.) Menu tree-specific settings mean that you could style an individual menu tree differently from another menu tree, but you could not style the child menus of a particular menu tree differently from their parent menus. All child menus, with few exceptions, inherited the look and feel of their parent menus. Additionally, certain configuration parameters such as border and separator widths were not available on the menu tree level; meaning that, at best, they could only be set once to apply to all menus displayed on a particular page.

HierMenus version 6 offers a wealth of new menu design possibilities, by supporting nearly all configuration parameters on a menu-specific level. No longer is a designer limited to child menus which all look exactly like their parents, as each individual menu contains a full set of configuration parameters that are applied specifically to that menu; including colors, fonts, and widths (menu, border, and separator widths). Of course, global parameter settings are still supported for ease in assigning settings that the designer requires to be established "across the board."

HierMenus version 6 also implements item-specific parameter settings, which override the menu-specific settings for any particular item within a menu. Practically all the parameters that can be set on a menu level can be overridden for a specific item; including background and rollover colors, padding width settings, and font sizes and styles; meaning that the individual items of a menu need no longer be identical to one another in appearance.

Finally, in HM5 and previous versions, certain parameters could only be set on specific types of menus; for example, scrolling was never applied to PositionUnder menus, and the KeepInWindow behavior was never applied to permanent menus. Both of these restrictions are removed in HM6, meaning that you can create PositionUnder menus which properly display scroll bars if they exceed the height of the view screen; and the initial display of permanently visible menus can be automatically adjusted to be within the viewable area of the browser. And because each of these parameters can now be applied specifically to individual menus, you can always specifically set them so as to emulate the HM5 behavior, if you so choose (by setting the ScrollEnabled and KeepInWindow override variables specifically on the menu in question).

New Menu Styling Options

In addition to the expanded capabilities of existing configuration parameters as described above, HM6 will offer many new menu styling options for the first time. Among the newer offerings:

• Text Alignment. Menu text can now be aligned to the left (the default), right, or center. This removes the need to align individual menu items using additional HTML in the configuration file (i.e., no more need for:

  <div style='text-align:center'>Menu Item 1</div>

  in your menu items).

• Menu Padding and BackGround Colors. Menu padding widths may be specified (in pixels only) for the top, right, bottom, and left sides of a menu (each side is set independently). The MenuPadding is applied between the border of the menu and the edges of the individual menu items. The color displayed in this area is controlled by a new menu background color parameter. (Menu padding and background color are not supported in NS4.)

• Independent Menu Border Widths. Each of the four border widths may be specified (in pixels only) independently on a menu by menu basis. (Independent border widths not supported in NS4.)

• Font Settings. Font weight, size, family, and style can now be set independently, with possible values corresponding to their CSS equivalent settings. This CSS equivalence now includes font size, which can therefore be set in pixels, points, or any other legal CSS length value.
  

• Selected Colors. In addition to our existing "off" and "over" colors for menu items, you may now specify a third set of colors that will be applied to the item when it is "selected," that is, when the item has a child menu that is currently visible. The KeepHilite behavior honors this selected state, so if you roll over a child menu when KeepHilite is in effect, the parent item (the menu item that spawned the child menu) will continue to display its "selected" state. Like the existing IsPermHilite parameter, a new IsSelected parameter allows you to set a particular item so that it displays its selected state at all times. (Selected colors not supported in NS4.)

• Separator Styles. Item separators can now be styled in the same manner as border styles, using CSS keywords such as "groove," "dashed," "dotted," and etc. The actual appearance of the separators on the page is, of course, highly browser dependent; just as it is in standard CSS settings. (Separator styles are not supported in NS4.)

• Variable Width Minimums. You can now specify the minimum width of variable width menus; ensuring that variable width menus with short menu item descriptions will still be presented with at least a certain pixel width.

• Menu and Item Titles, Image Alternate Text. You can now specify titles for your menus and menu items (that will be transfered directly to the title attribute of the elements) and you can also specify the exact alt text for more images. Both the title and alt text specifications can be made at a global, menu specific, or item specific level.

But what about all those "not supported in NS4" disclaimers? Let's continue our preview with a look at HM6's support for older browsers.

[next]