In many applications you are using different kind of menu controls, for instance context menus and drop down menus. The different menus have common style classes. This allows for applying the same look to different controls. For the styling of the menus, adapt the style variables and/or style classes of your style sheet using the Style Sheet Editor tool (see Ajax Developer documentation). The following provides some hints concerning the style classes shared by several different menu controls as well as the unshared classes.
This document covers the following topics:
Both menu controls support separating menu items by a separator. A separator consists of 4 rows:
| Row | Description | Style Classes |
|---|---|---|
| Row 1 | Space above the separator |
|
| Row 2 | Separator first line | MENUSeparatorFirstRow |
| Row 3 | Separator second line | MENUSeparatorSecondRow |
| Row 4 | Space below the separator |
|
Context and drop down menus use individual style classes and also share some common style classes. They for example share the style classes for the separator mentioned above. The following table lists the most common shared and unshared style classes:
| Class | Context Menu | Drop Down Menu | Description |
|---|---|---|---|
MENUItemTable |
X | X | Is applied to the
<table> that encases the menu items.
|
MENUItemImageCell |
X | X | Each menu item row consists of an image
and a label cell. This style class is applied to the image cell
(<td> element).
|
MENUItemImageCellRollOver |
X | X | When rolling with the mouse over a menu
item, this style class replaces the MENUItemImageCell style
class.
|
MENUItemLabelCell |
X | X | Each menu item row consists of an image
and a label cell. This style class is applied to the label cell
(<td> element).
|
MENUItemLabelCellRollOver |
X | X | When rolling with the mouse over a menu
item, this style class replaces the MENUItemLabelCell style
class.
|
MENUSeparatorImgAboveCell |
X | X | In a separator, this style class is applied to the image (left) cell of the space above (Row 1). |
MENUSeparatorLabelAboveCell |
X | X | In a separator, this style class is applied to the label (right) cell of the space above (Row 1). |
MENUSeparatorFirstRow |
X | X | In a separator, this style class is applied to the image and label cell of the separator first line (Row 2). |
MENUSeparatorSecondRow |
X | X | In a separator, this style class is applied to the image and label cell of the separator second line (Row 3). |
MENUSeparatorImgBelowCell |
X | X | In a separator, this style class is applied to the image (left) cell of the space below (Row 4). |
MENUSeparatorLabelBelowCell |
X | X | In a separator, this style class is applied to the label (right) cell of the space below (Row 4). |
MENUTextCell |
X | Use this style class to define the text
style of context menu items. The text of a menu item is rendered within an
<a> element. This
<a> element is embedded in a
<td> element. This style class is applied to
that <td> element.
|
|
MENUTextCellRollOver |
X | When rolling the mouse over an item
within a context menu, this style class replaces the MENUTextCell
style class.
|
|
MENUTextCellInactive |
X | When a context menu item is set to
inactive (i.e. not selectable), this style class is applied to the
<td> element, which renders the text.
|
|
MENUTop |
X | In contrast to context menus, drop down
menus have a header line, which is always visible. This header line displays
the top nodes. Each top node is rendered within a
<table> element. This style class is applied
to that <table> element.
|
|
MENUTopRollOver |
X | When rolling the mouse over a top node,
this style class replaces the MENUTop style class.
|
|
MENUTopPressed |
X | When clicking on a top node, this style
class replaces the MENUTopRollOver style class.
|
|
MENUTopTextCell |
X | Use this style class to define the text
within header lines. The text of a top node is rendered within an
<a> element. This
<a> element is embedded in a
<td> element. This style class is applied to
that <td> element.
|
|
MENUTopTextCellRollOver |
X | When clicking on a top node, this style
class replaces the MENUTopTextCell style class.
|
|
MENUDropDownTextCell |
X | Use this style class to define the text
style of drop down items other than top nodes. The text of a menu item is
rendered within an <a> element. This
<a> element is embedded in a
<td> element. This style class is applied to
that <td> element.
|
|
MENUDropDownTextCellRollOver |
X | When rolling the mouse over an item
within a drop down table, this style class replaces the
MENUDropDownTextCell style class.
|
|
MENUDropDownTextCellInactive |
X | When a menu item other than a top node is
set to inactive (i.e. not selectable), this style class replaces the
MENUDropDownTextCell style class.
|