HierMenus CENTRAL: HierMenus In Progress. Status Report: HM6 Preview (3/4)

[previous] [next]

Transitions and Filters

HierMenus 6 offers support for transition and filter settings in IE5.5 and IE6. In other browsers, such filters will simply not function, continuing to show the menu in its non-filtered, plain transition state. Though limited only to IE5.5/6 use, filters and transitions can be used to add creative, unique display and show/hide effects to individual menus, such as menu fades or wipes. HM6 supports the more advanced filter/transition syntax of IE5.5 and later, and independent transitional filters can be applied to both the "show" and "hide" states of the menus. Only one transitional filter can be applied to each of the hide/show states of a particular menu; but multiple static filters can be applied to the same menu.

Sliding Menus

In later version browsers sliding menu support will be offered. Sliding menus are one of the most--if not the most--popular of menu transition display options, in which a menu appears to slide into its position from the top, right, bottom, or left. Like IE transitions, sliding menu options may be specified separately for both the show and hide states of the menu; though we recommend, (to reduce annoyance to your site's visitors), that the hide state sliding menu feature be avoided. (I.E., slide the menus in, but allow them to disappear immediately at the appropriate time).

Sliding Menus will not be supported in NS4.x or IE4.x. Additionally, the earliest Gecko based browsers (Mozilla versions prior to 1.2.1 and Netscape versions prior to 7.1) will not be supported.

Opacity

Another common request made of HM menus is to add support for opacity settings. HM6 does precisely this, supporting most later version browsers which offer direct opacity support, including Internet Explorer 5.5 and later, Gecko (beginning with Netscape 6.1 and Mozilla 1.0), and Safari 1.1. Opacity settings follow the CSS3 recommendations, allowing for values in the range 0.0 (fully transparent) to 1.0 (fully opaque). HM6 will translate these values into the appropriate values and property settings required by each particular browser.

In Internet Explorer, opacity is assigned by way of filters (see above). Note that if you prefer to control IE opacity via your own filter settings, you can always conditionally apply the HM opacity setting like this:

MenuOpacity:(window.HM_IE5W&&!window.HM_IE50W)?null:0.7

or via your own preferred sniffing techniques.

Menu and Item BackGround Images

Background images can now be applied to both menus and menu items. In addition to the image URLs themselves, users can optionally provide additional background CSS properties, such as "scroll top left repeat" (which is, incidentally, the default when no additional properties are provided). Menu Background images are supported in all HM browsers other than Netscape 6.0-6.1; and Item Background images are supported in all HM browsers other than Netscape 4.x and Netscape 6.0-6.1.

Style Sheet Class Name Support

To facilitate integration with site wide style sheets, HierMenus now supports the direct application of class names both to menus and to items. By applying a class name to a menu, you can control the color and font schemes of menus via class settings in your style sheet, and therefore change the look of the menus without having to adjust your HM configuration file. While some settings remain reserved by HM and cannot be applied via style sheet classes (such as menu width, padding widths, and border widths), the more commonly "styled" parameters of menus and items, including colors, font styles and sizes, can be inherited from style sheet class assignments. Seperate class names for the menus can be supplied for the "off," "over," and "selected" (see page 1) states of menu items, allowing for the style sheet based change of colors when the menu items are rolled over. (Font changes are not recommended on rollover and will generally produce undesirable results). Menu and item class name assignments are not supported in NS4.

Button Support

Closely related to the above is HM6's new support for menu item "buttons." In brief, menu item buttons are separate containers within each menu item that can be styled via class names in the same manner as menus and items as described above. Unlike the class names described above, however, button styles are not limited in terms of border widths, and therefore you can create internal "buttons" within your menu items with borders that change when the button is rolled over, providing a push-button (by swapping the ouset/inset styles of the button border) or similar types of effects. Like the item classes described above, HM allows for the specification of "off", "over," and "selected" state button class names. While the button classes provide you with more freedom in the display of menu items, it is still recommended that the "off", "over", and "selected" states of the button classes match in terms of the button dimensions (font sizes, border widths, padding widths, etc.) as HM will not dynamically "resize" a menu each time a new button class is assigned. Button classes are not supported in Netscape 4.x or IE4.x.

Now let's conclude our HM6 preview with a quick look under the hood.

[previous] [next]