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.
|