Access
To insert a Menu object, you must either:
Choose the Adelia Web Studio Objects/Menu option from the Insert menu in the Macromedia Dreamweaver® window.
Click on the corresponding button
in the Adelia object insertion bar in Dreamweaver®.
Important note: To edit a Menu object, insert or change menu items, select the corresponding tag in Dreamweaver®, in either "Code" or "Creation" mode. You can then edit the object using the Menu object property inspector.
For a better understanding of the graphical functions of this object, refer to the examples supplied in the Adelia knowledge base (EXAMPLE_WEB application area in KLBADEL environment).
This dialog box lets you specify the attributes of the Menu object.
Properties
General
Name
Adelia guide word of the list.
Type
Graphical type of the menu.
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.
A context-sensitive (or popup) menu becomes visible when a particular Javascript event is triggered. This event is defined in the properties box of the Adelia object with which the menu is associated.
Possible values:
- Menu bar,
- Context-sensitive menu.
Representation of context-sensitive menu
Displays the graphical representation of a context-sensitive menu in the layout manager (while in Creation mode). Only the top-level items are shown.
Box checked |
The Menu object is drawn in Dreamweaver®'s Creation mode window. |
| Box unchecked |
No graphical representation of the Menu object is displayed. A placeholder image |
Menu orientation
Display orientation of the top-level menu items.
With a horizontal orientation, items are displayed on the same row in the order in which they are created, with each new item located to the right of the previous one.
With a vertical orientation, items are displayed on multiple rows, with each new item being positioned below the previous one.
Note: Creating an accordion menu forces the orientation to Vertical.
Possible values:
- Horizontal,
- Vertical.
Submenu orientation
Display orientation of the items in submenus (i.e. non top-level items) of a menu. With a horizontal orientation, items are displayed on the same row in the order in which they are created, with each new item located to the right of the previous one.
With a vertical orientation, items are displayed on multiple rows, with each new item being positioned below the previous one.
Note: Creating an accordion menu forces the orientation of any submenus to Vertical.
Possible values:
- Horizontal,
- Vertical.
Submenu position
Display position of the items in submenus (i.e. non top-level items) of a menu.
If the position is set to "Under item", each submenu is positioned under the item that defines it, with the same left alignment. If the position is set to "Under parent", each submenu is positioned under its parent menu, with the same left alignment.
Note: This property can only be used if the submenu orientation is set to horizontal. If the submenu orientation is vertical, or if the menu is an accordion menu, the submenu position is forced to "Under item".
Possible values:
- Under item,
- Under parent.
Accordion menu
Box checked |
Defines a menu as an accordion menu. This type of menu is displayed vertically in a single column. Items defining submenus can be expanded and collapsed. When an item is expanded, its submenu is displayed underneath it. A left margin is created to indicate the presence of a submenu. Only one item per level can be expanded at a time. In an accordion menu, it is possible to set and/or get the clicked item via the SELECT_ITEM_NAME 4GL property (an accordion menu is also a tab bar). |
Tab bar
Box checked |
Defines a menu as a tab bar. This makes it possible to work with an item when it is selected by a program (see the SELECT_ITEM_NAME poperty of the Menu object) or by the user clicking on it. 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, 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. It is possible to graphically differentiate the selected menu item from the other items by setting styles for it (e.g. background color, text color, CSS class of the text or the item) when the Menu object's layout is designed. |
Visual effect
Defines the visual effect applied to the menu (in the case of a context-sensitive menu) and any submenus. This property is only supported by the Internet Explorer browser.
Possible values:
None |
The menu is displayed immediately, |
Fade in |
The menu is displayed gradually, with a fade-in effect, |
Pixelate |
The menu is displayed gradually, with a pixellation effect, |
Dissolve |
The menu is displayed gradually, with a dissolve effect, |
Wipe down |
The menu is displayed gradually, with a downward wipe effect, |
Wipe right |
The menu is displayed gradually, with a left-to-right wipe effect, |
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.
For accordion menus, the number of rows or columns is always set to 1.
Note: It is possible to change the number of rows or columns for a particular submenu by modifying this property for the corresponding menu item (see the "General" section in the Menu object property inspector's "Item properties" tab ).
Close by clicking on page background
Sets the closing mode for a context-sensitive menu and submenus. The purpose of this property is to maintain consistency with the menu's opening mode.
For the sake of ergonomics, this property should be selected when the Javascript event that opens a menu is based on a mouse click (oncontextmenu, onclick, onmousedown or onmouseup).
This property should be deselected when the Javascript event is based on a mouse movement (onmouseover).
Box checked |
To close a context-sensitive menu and any open submenus, the user must click on the page background . |
Box unchecked |
To close a context-sensitive menu and any open submenus, the user must move the mouse pointer away from the menu item. |
Note: Pressing the Escape key closes the most recently-opened menu or submenu.
Menu styles
Background color
Background color of the menu and all submenus. This color can be specified as follows:
- as a Red Green Blue triplet (e.g. #FF0000),
- as an HTML literal constant (e.g. red).
Note: The background color can be set for all items (see the "Menu item styles" section below) or for a particular item (see the "Item colors" section in the property inspector's "Item properties" tab). In this case, the background color defined for an individual item takes precedence over the color defined globally for all items, which in turn has priority over the menu-level color.
Border
Defines the appearance of the border around the menu and any submenus, by specifying:
- its color,
- its thickness (in pixels),
- its line style.
Possible values for the line style:
- none: no border,
- solid: unbroken line,
- double: double line,
- dotted: dotted line,
- dashed: dashed line,
- groove: line with a sunken relief,
- ridge: line with a raised relief.
Image for top-level submenus (Normal)
Specifies an image to be placed to the right of the names of items that define top-level submenus. This image is then displayed when the item is in its normal state (i.e. when the mouse pointer is not positioned over the item).
Image for top-level submenus (Mouseover)
Specifies an image to be placed to the right of the names of items that define top-level submenus. This image is then displayed when the item is in its mouseover state (i.e. when the mouse pointer is positioned over the item).
Position of top-level submenus image
Sets the position of images (specified in the "Image for top-level submenus (Normal)" and "Image for top-level submenus (Mouseover)" sections) to the right or left of the description of items defining top-level submenus.
Image for level n submenus (Normal)
Specifies an image to be placed to the right of the names of items that define submenus other than top-level submenus. This image is then displayed when the item is in its normal state (i.e. when the mouse pointer is not positioned over the item).
Image for level n submenus (Mouseover)
Specifies an image to be placed to the right of the names of items that define submenus other than top-level submenus. This image is then displayed when the item is in its mouseover state (i.e. when the mouse pointer is positioned over the item).
Position of level n submenus image
Sets the position of images (specified in the "Image for level n submenus (Normal)" and "Image for level n submenus (Mouseover)" sections) to the right or left of the description of items defining nth-level submenus.
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).
Menu item styles
Item background color (Normal)
Sets the background color of all items in their normal state (i.e. when the mouse pointer is not positioned over the item). This color can be specified as follows:
- as a Red Green Blue triplet (e.g. #FF0000),
- as an HTML literal constant (e.g. red).
Note: It is possible to individually specify the background color for a particular item (see the "Item colors" section in the property inspector's "Item properties" tab). In this case, the background color set for an individual item takes precedence over the color defined globally for all items.
Item background color (Mouseover)
Sets the background color of all items in their mouseover state (i.e. when the mouse pointer is positioned over the item). This color can be specified as follows:
- as a Red Green Blue triplet (e.g. #FF0000),
- as an HTML literal constant (e.g. red),
Note: It is possible to individually specify the background color for a particular item (see the "Item colors" section in the property inspector's "Item properties" tab). In this case, the background color set for an individual item takes precedence over the color defined globally for all items.
Item text color (Normal)
Sets the text color of all items in their normal state (i.e. when the mouse pointer is not positioned over the item). This color can be specified as follows:
- as a Red Green Blue triplet (e.g. #FF0000),
- as an HTML literal constant (e.g. red),
Note: It is possible to individually specify the text color for a particular item (see the "Item colors" section in the property inspector's "Item properties" tab). In this case, the text color set for an individual item takes precedence over the color defined globally for all items.
Item text color (Mouseover)
Sets the text color of all items in their mouseover state (i.e. when the mouse pointer is positioned over the item). This color can be specified as follows:
- as a Red Green Blue triplet (e.g. #FF0000),
- as an HTML literal constant (e.g. red),
Note: It is possible to individually specify the text color for a particular item (see the "Item colors" section in the property inspector's "Item properties" tab). In this case, the text color set for an individual item takes precedence over the color defined globally for all items.
Disabled items text color
Sets the text color used for disabled items. This color can be specified as follows:
- as a Red Green Blue triplet (e.g. #FF0000),
- as an HTML literal constant (e.g. red),
An item can be disabled either by layout design (see the Enabled property in the "Item styles" section in the Property inspector's "Item properties" tab) or by using the ACTIVE property in the 4GL editor.
Disabled items do not have a mouseover state and cannot be used to trigger Adelia events.
CSS class of item text (Normal)
Sets the CSS style class assigned to the label text of menu items in their normal state (i.e. when the mouse pointer is not positioned over the item).
Note: It is possible to individually specify a text class for a particular item (see the "Item styles" section in the property inspector's "Item properties" tab). In this case, the text class set for an individual item takes precedence over the class defined globally for all items.
CSS class of item text (Mouseover)
Defines the CSS style class assigned to the label text of menu items in the mouseover state (i.e. when the mouse pointer is positioned over the item).
Note: It is possible to individually specify a text class for a particular item (see the "Item styles" section in the property inspector's "Item properties" tab). In this case, the text class set for an individual item takes precedence over the class defined globally for all items.
CSS class of items (Normal)
Defines a CSS style class for all items in their normal state (i.e. when the mouse pointer is not positioned over the item). This class is assigned to each item's container (a TD HTML tag).
Note: It is possible to individually specify a class for a particular item (see the "Item styles" section in the property inspector's "Item properties" tab). In this case, the class set for an individual item takes precedence over the class defined globally for all items.
CSS class of items (Mouseover)
Defines a CSS style class for all items in the mouseover state (i.e. when the mouse pointer is positioned over the item). This class is assigned to each item's container (a TD HTML tag).
Note: It is possible to individually specify a class for a particular item (see the "Item styles" section in the property inspector's "Item properties" tab). In this case, the class set for an individual item takes precedence over the class defined globally for all items.
Styles for the selected item
Only items in an accordion menu or tab bar can be selected. Provided this is the case, clicking on the item sets it to the selected state. It is also possible to set the selected item in the 4GL editor, using the SELECT_ITEM_NAME property.
Background color (Normal)
Sets the background color of the selected item in its normal state (i.e. when the mouse pointer is not positioned over the item). This color can be specified as follows:
- as a Red Green Blue triplet (e.g. #FF0000),
- as an HTML literal constant (e.g. red).
Background color (Mouseover)
Sets the background color of the selected item in its mouseover state (i.e. when the mouse pointer is positioned over the item). This color can be specified as follows:
- as a Red Green Blue triplet (e.g. #FF0000),
- as an HTML literal constant (e.g. red).
Text color (Normal)
Sets the text color of the selected item in its normal state (i.e. when the mouse pointer is not positioned over the item). This color can be specified as follows:
- as a Red Green Blue triplet (e.g. #FF0000),
- as an HTML literal constant (e.g. red).
Text color (Mouseover)
Sets the text color of the selected item in its mouseover state (i.e. when the mouse pointer is positioned over the item). This color can be specified as follows:
- as a Red Green Blue triplet (e.g. #FF0000),
- as an HTML literal constant (e.g. red).
CSS class of text (Normal)
Defines the CSS style class assigned to the label text of the selected menu item in its normal state (i.e. when the mouse pointer is not positioned over the item).
CSS class of text (Mouseover)
Defines the CSS style class assigned to the label text of the selected menu item in its mouseover state (i.e. when the mouse pointer is not positioned over the item).
CSS class (Normal)
Defines a CSS style class for the selected item in its normal state (i.e. when the mouse pointer is not positioned over the item). This class is assigned to the item's container (a TD HTML tag).
CSS class (Mouseover)
Defines a CSS style class for the selected item in its mouseover state (i.e. when the mouse pointer is positioned over the item). This class is assigned to the item's container (a TD HTML tag).
Event
OnBeforeAppear
Box checked |
An Adelia event processing block is assigned in response to a request to reveal a context-sensitive menu. The event processing block can be either an Adelia event (which may or may not validate the form) or an Javascript expression. This event can be used to configure a menu and all of its items based on a particular context of use. Note: This event MUST be an AJAX event. |
Note: Adding an OnBeforeAppear event processing block to a Menu object named MNU_1 creates an event block named MNU_1:ONBEFOREAPPEAR in the 4GL source when the HTML page is saved. MNU_1:ONBEFOREAPPEAR is nested in the MNU_1 object block, which is itself nested in the EVENT MANAGEMENT block.
OnClickDynItem
Box checked |
An Adelia event processing block is assigned, in response to the user clicking on a dynamically-added menu item (via the ADD_MENU_ITEM method). The event processing block can be either an Adelia event (which may or may not validate the form) or a Javascript expression. |
Notes:
The DYN_ITEM_NAME property contains the name of the item clicked by the user.
Adding an OnClickDynItem event processing block to a Menu object named MNU_1 creates an event block named MNU_1:ONCLICKDYNITEM in the 4GL source when the HTML page is saved. MNU_1:ONCLICKDYNITEM is nested in the MNU_1 object block, which is itself nested in the EVENT MANAGEMENT block.
Click here for more information on Adelia event processing blocks.