home / samples / buttons

Buttons

The area inside a menu item (i.e., within the ItemPadding) is called the menu item button. Beginning with HierMenus version 6, you can apply styling to this area by assigning it a ButtonClass. The button class you assign should refer to a class that you have defined in your style sheet elsewhere on the page.

The most common use for button classes will be to apply borders to individual menu items: Either swapping border styles when the item is rolled over to create a push button effect, as in the above example menu; or using a simple 1 pixel border that is initially hidden (that is, a solid style border set to the same color as the menu item's background color) and appears only on rollover, as in the example below.

Button styling relies entirely on style sheet based class name settings; individual HM parameters are available to set the on, off, and selected class names for each button.

Remember that neither Netscape 4.x nor Internet Explorer 4.x support button class assignments in HM. How to properly deal with this and many other class-specific issues is dealt with in our mini-tutorial Using Classes, which should be considered required reading for anyone who wants to use class name assignments in their menu configurations.

In addition to the two main examples presented here, there is also a third, less obvious example menu that demonstrates the use of buttons. Our main navigation menus that popup from the links on the upper left side of the page also use button effects when the menu items are rolled over.

For further information, check out the reference entries for these configuration parameters:

ButtonClass
ButtonClassOver
ButtonClassSelected
Using Classes Mini-Tutorial

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

buttons.js