MENU (Adelia Web Context)

A Menu object is used to represent a menu bar or a context-sensitive menu.

A menu is a set of Menu Item objects grouped together in a tree.

In the documentation, items are classed in two groups:

top-level (or level 1) items; these items do not have a parent item (they are directly visible in the menu with no need to expand a submenu),

non top-level (or level n) items; these items have a parent item (they are revealed by expanding a submenu).

Items can have the following three states:

Normal (or normal state): the mouse pointer is not located inside the rectangle that defines the item's position.

Mouseover (or mouseover state): the mouse pointer is located inside the rectangle that defines the item's position. Items in this state can potentially be clicked by the user.

Selected: in the context of a tab bar, this state distinguishes one item from the others. An item can be selected via the interface (when the user clicks on it) or by programming.

It is possible to define graphical properties associated with these three states.

The Menu object has a number of graphical characteristics that can be modified to customize how it is displayed:

Characteristic	Description
Type	A menu bar is a menu displayed in a fixed location, in which the top-level items remain visible on the page at all times.
Orientation	Sets the display orientation of top-level items. The orientation can be either horizontal or vertical.
Submenu orientation	Sets the display orientation of non top-level items. The orientation can be either horizontal or vertical.
Submenu position	Sets the display position of non top-level items. This position can be either "Under item" or "Under parent".
Accordion menu	Specifies that menu items are displayed in accordion format. An accordion menu is a vertical menu in which any submenus are displayed under the parent item. Only one submenu per level can be expanded at a time. An accordion menu bar is also a tab bar.
Tab bar	Menu that lets the user work with the selected item. Only one item can be selected at a time. In a non-accordion menu, only the top-level items can adopt the selected state. In an accordion menu bar, all items (apart from separators) can adopt the selected state. In this context, when the selected item is set by a program, any submenus are automatically expanded to make the item visible.
Visual effect	Defines the visual effect applied to the menu (in the case of a contextual menu) and any submenus. This property is only supported by Internet Explorer.
Opacity	Sets the opacity (as a percentage) of submenus. If the value is set to 100%, submenus will be totally opaque. Conversely, if the value is set to 0%, submenus will be totally transparent.
Number of rows or columns	Sets the number of rows or columns (depending on the menu orientation) on which to display the menu's top-level items. If the menu is oriented horizontally, this number specifies a number of rows, in which case, each item is placed on a different row to the previous one. If the menu is oriented vertically, this number specifies a number of columns, in which case, each item is placed on a different column to the previous one.
Close on page click	Defines the closing mode for a contextual menu and submenus. The purpose of this property is to maintain consistency with the menu's opening mode (with Javascript events such as ONCONTEXTMENU, ONMOUSEOVER, ONCLICK, etc.). When this property is enabled, contextual menus and any open submenus are closed by clicking on the page background. When the property is disabled, contextual menus and any open submenus are closed by moving the mouse pointer away from the menu item. For the sake of ergonomics, this property should be enabled when the Javascript event that opens a menu is based on a mouse click (oncontextmenu, onclick, onmousedown or onmouseup). This property should be disabled when the Javascript event is based on a mouse movement (onmouseover). Note: Pressing the Escape key closes the most recently-opened menu or submenu.
Background color	Sets the background color of the menu and all submenus.
Border	Defines the appearance of the border around the menu and any submenus (specifying its color, line style and line weight).
Image for top-level submenus	Sets an image for all top-level items with child items, for the normal and mouseover states. These images are displayed to the right of the item's label text.
Position of level 1 submenus image	Defines the position of the image specified above in relation to the menu item description.
Image for level n submenus	Sets an image for all non top-level items with child items, for the normal and mouseover states. These images are displayed to the right of the item's label text.
Position of level n submenus image	Defines the position of the image specified above in relation to the menu item description.
CSS class of submenus	Defines a CSS style class for all submenus of the Menu object. This class is assigned to each submenu's container (a DIV HTML tag).
Item background color	Sets a background color for all items in the normal and mouseover states.
Item text color	Sets a text color for the label text of all items in the normal and mouseover states.
Disabled items text color	Defines the text color used for the text labels of disabled items. Disabled items cannot adopt the mouseover state and do not respond if clicked by the user.
CSS class of item text	Sets a CSS style class for the label text of all menu items in the normal and mouseover states.
CSS class of items	Sets a CSS style class for all menu items in the normal and mouseover states. This class is assigned to each item's container (a TD HTML tag).
Styles for the selected item	It is possible to define graphic characteristics for items that are in the 'selected' state (e.g. background color, text color, CSS class of the text or the item).

MENU ITEM objects are created in Dreamweaver®, using the Menu object property inspector.

Each menu item has a number of graphic characteristics that can be modified to customize how it is displayed:

Name	Item text
Separator	Specifies whether or not the item is a separator. Separator items cannot adopt the mouseover state and do not respond if clicked by the user. A line separator does not have a text label and is represented graphically by a horizontal line. A text separator has a text label. It is used to represent sections in a menu graphically: all items that follow the text separator have a left margin.
Number of rows or columns	Sets the positioning of the items in the submenu defined by the item.
Active	Specifies that an item is enabled.
Visible	Sets the item's visibility.
Associated image	Specifies an image that is displayed to the left of the item's text label in the normal and mouseover states.
CSS classes of text	Sets a CSS style class for the label text of the menu item in the normal and mouseover states. This class takes precedence over the one defined at menu level, for all menu items.
CSS classes	Sets a CSS style class for the menu item in the normal and mouseover states. This class is assigned to each item's container (a TD HTML tag). This class takes precedence over the one defined at menu level, for all menu items.
Background colors	Sets a background color for the item in the normal and mouseover states. This color takes precedence over the one defined at menu level, for all menu items.
Text colors	Sets a text color for the item's label text in the normal and mouseover states. This color takes precedence over the one defined at menu level, for all menu items.

To use a context-sensitive menu with an Adelia Web control, the menu must be linked to the control (in the control creation dialog box or in the property inspector in Dreamweaver®). It is possible to associate multiple Adelia controls with the same Menu object (the Menu object's ORIGIN_OBJ property, when used in a menu item's event processing block, identifies the Adelia object for which the user has opened the menu).

It is also possible to select the Javascript event that will cause the context-sensitive menu to open.

Note concerning the use of the "oncontextmenu" event:

With this event, the menu opens when the user right-clicks the associated control. By default, the browser opens a system menu when this event is triggered. To display the system menu instead of the Adelia menu, press the Ctrl key while right-clicking.

If you use a context-sensitive menu linked with a table list "column" Adelia control, it is possible to identify the line to which to apply the process in an event processing block for the menu or a menu item:

in a single-selection list, this line becomes the selected line; it can then be retrieved via a READ_LST *SELECT instruction,

in a multi-selection list, the process is considered to apply to the line(s) previously selected by the user.

Note: In a TABLE LIST object, it is possible to visually differentiate the line over which the mouse pointer is positioned (refer to the Color/Class style in Inserting a Table List object).

The Menu object uses, in addition to the graphical properties, a number of predefined CSS classes (in the AWSGUIControls.jsp style sheet in the AWSResources directory).

List of classes

This class is assigned to the main container (a DIV tag) that contains the menu (i.e. the menu bar or top-level context-sensitive menu). The container ID's value is divMnu<MENU_OBJECT_NAME>.

This class is assigned to the main table (a TABLE tag contained in the main DIV) that contains the menu (i.e. the menu bar or top-level context-sensitive menu).

The value of the table's ID attribute is tblMnu<MENU_OBJECT_NAME> (e.g. tblMnuMNU_1).

Example :

.AWSMenuTbl {

width :100% ;

}

Sets the table's width to match that of the DIV container, if the container's width is set by a CSS class (AWSMenuDiv or #divMnu<MENU_OBJECT_NAME>).

This class is assigned to the main table (a TABLE tag contained in the submenu's main DIV) that contains a non top-level submenu. The value of the table's ID attribute is tblSmMnu<MENU_OBJECT_NAME> <ITEM_OBJECT_NAME> (e.g. tblSmMnuMNU_1ITE_1).

Note: Each DIV that contains a non top-level submenu has the attribute ID divSmMnu<MENU_OBJECT_NAME><ITEM_OBJECT_NAME>, in which <ITEM_OBJECT_NAME> is the name of the item that defines a submenu.

Example :

.AWSMenuTblSm {

border-style :none ;

}

Cancels, for all the submenus, the border assigned to the menu and submenus.

This class is assigned to the image (an IMG tag) associated with a menu item (in the normal and mouseover states). This image is displayed to the left of the item's label text.

It is defined as follows:

.AWSMenuItemLeftImage {

vertical-align:middle; /* aligns the image vertically */

}

It is possible to enhance this class, for example by adding a right margin:

.AWSMenuItemLeftImage {

padding-right :3px ;

}

This class is assigned to the container (a TD tag) that contains the image associated with a menu item (in the normal and mouseover states).

It is defined as follows:

. AWSMenuItemLeftImageTd {

}

This class can be enhanced in order to force the image's container to a fixed width (other than the default "auto" CSS value):

. AWSMenuItemLeftImageTd {

width :5% ;

}

This class is assigned to the image (an IMG tag) associated with a menu item that defines a submenu (in the normal and mouseover states). This image is displayed to the right of the item's label text. It is defined as follows:

.AWSMenuItemRightImage {

vertical-align:middle;

}

It is possible to enhance this class, for example by adding a left margin:

.AWSMenuItemRightImage {

padding-left :3px ;

}

This class is assigned to the table (a TABLE tag) that contains a menu item.

This table contains the left image associated with the item, the item's label text and the right image associated with the item. The value of the table's ID attribute is tblMnu<MENU_OBJECT_NAME> <ITEM_OBJECT_NAME> (e.g. tblIMnuMNU_1ITE_1).

This class is defined as follows:

.AWSMenuTblI {

padding:1px;

}

It is possible to enhance this class, for example by increasing the left and right margins:

.AWSMenuTblI {

padding-left :3px ;

padding-right :3px ;

}

This class is assigned to the container (a TD tag) that contains a menu item's table (with the ID tblIMnuXXX). This class can be used to specify a margin between each menu item and between menu items and the edge of the menu. It is defined as follows:

.AWSMenuTblTd {

padding:2px;

}

It is possible to enhance this class, for example by deleting margins:

.AWSMenuTblTd {

padding:0px;

}

This class is used to specify the value of the left margin in menu items that follow a text separator item. It is defined as follows:

.AWSMenuItemMargin {

width:10px;

}

It is possible to enhance this class, for example by increasing the margin:

.AWSMenuItemMargin {

width:15px;

}

With more than one menu (in a same page or in several parts of a same page layout), you can enhance main classes by assigning to them different values of attributes for each menu.

Proceed as follows depending on the tag to which the class is assigned:

For each class for which the value of the ID attribute of the tag is known, you must use the named class that corresponds to the ID value.

Class	Tag ID	Named class
AWSMenuDiv	divMnu<MENU_OBJECT_NAME>	#divMnu<MENU_OBJECT_NAME>
AWSMenuTbl	tblMnu<MENU_OBJECT_NAME>	#tblMnu<MENU_OBJECT_NAME>
AWSMenuTblSm	tblSmMnu<MENU_OBJECT_NAME><ITEM_OBJECT_NAME>	#tblSmMnu<MENU_OBJECT_NAME><ITEM_OBJECT_NAME>
AWSMenuTblI	tblIMnu<MENU_OBJECT_NAME><ITEM_OBJECT_NAME>	#tblIMnu<MENU_OBJECT_NAME><ITEM_OBJECT_NAME>

If the named class enhances an attribute already defined in the main class, !important must appear next to the attribute.

Example:

.AWSMenuDiv { /* class used by all the menus in the page */

width:300px;

}

#divMnuMNU_2 { /* class used by the menu MNU_2 only */

position:absolute;

left:10px;

right:10px;

width: 500px !important;

}

For a class with an unknown value for the ID attribute of the tag, or if the number of named classes to be created is too important (e.g. the AWSMenuTblI class assigned to every menu item), you must define a class using descendant selector rule.

If the tag is part of a menu bar or a context-sensitive menu, you must use the general menu's DIV as a selector.

Examples:

#divMnuMNU_2 .AWSMenuTbl {

}

#divMnuMNU_2 .AWSMenuTblI {

}

If the tag is part of a submenu, you must use the submenu's DIV as a selector.

Examples:

#divSmMnuMNU_2ITE1 .AWSMenuTblSm {

}

#divSmMnuMNU_2ITE1 .AWSMenuTblI {

}

For a better understanding of the graphical functions for this object, please refer to the examples provided in the Adelia knowledge base (in the EXAMPLE_WEB application area in the KLBADEL environment).

Click below for more details on:

↑ Top of page

Using a context-sensitive menu

Context-sensitive menu in a table list

AWSMenuDiv

AWSMenuTbl

AWSMenuTblSm

AWSMenuItemLeftImage

AWSMenuItemLeftImageTd

AWSMenuItemRightImage

AWSMenuTblI

AWSMenuTblTd

AWSMenuItemMargin