- Overview of menu
- Creating a drop-down menu
- Creating a drop-down menu
- Adding options
- Options available in a menu description
- Describing a menu
- Style of a menu
- Deleting a menu
In WEBDEV, you can create the following elements in HTML pages: - a drop-down menu.
 New in version 28a context menu.  Not available.
From the different options of these menus, you can: - display pages,
- execute the code of the buttons in the page,
- ...
In WEBDEV, a drop-down or context menu in a page is considered as a control. This control has its own style characteristics. In the case of a drop-down menu, it can be moved in the page. Creating a drop-down menu Creating a drop-down menu To create a drop-down menu: - On the "Creation" tab, in the "Navigation" group, click "Menu".
- The menu automatically appears in the page with two default options.
- The menu can be moved in the page to the requested position.
Adding options To add options, click the selected menu: a yellow border appears: the menu switches to edit mode. The context menu of the menu options allows you to directly add the options into the page in edit. For more details, see Handling menu options.
Remarks: - To edit the menu, you can:
- press Space,
- press Enter,
- open the context menu and select "Edit menu".
- Press Esc to exit edit mode (the yellow border will disappear).
Options available in a menu description Describing a menu To display the menu description: - Click the menu options once.
- If the yellow border is not displayed: right-click the menu and select "Description".
- If the yellow border is displayed: right-click the menu and select "Menu description".
- The different tabs are used to define the menu characteristics:
- In the "General" tab, you can specify:
- the menu name,
- its orientation:
- Horizontal (default): Menu options are laid out horizontally.
- Vertical Popup: Menu options are laid out vertically. Sub-options open next to the parent option.
- Vertical Drop-down: Menu options are laid out vertically. Sub-options open below the parent option.
- the option selected by default.
Remark: The option selected by default can be modified through programming using the Selected property.
- In the "UI" tab, you can specify:
- whether or not the menu is visible.
- the process that will be executed on the controls of the page (send values to the server, don't send, etc.). By default, no data is sent to the server when a menu option is clicked.
- The "Advanced" tab is used to enter the HTML code generated before or after the control.
- The "Style" tab is used to define:
- the style of menu.
- the style of submenus.
- the available effects for displaying the menu options.
Style of a menu The style of a WEBDEV menu is described in the "Style" tab of the description window of menu. You have the ability to use, create and modify: - the WEBDEV styles. In this case, the style sheet is modified.
- the aspect of the control. In this case, the control is not linked to the style sheet.
When describing the style of a WEBDEV menu, you have the ability to specify: - The style of main menu: style of caption, ...
- The background image used for the main menu.
- The style of submenus: caption, ...
- The image of submenus: background image and image of options that open a submenu.
- The available effects for displaying the menu options.
Remark: The  button expands a menu used to select the images: - The "Browse" option is used to select an image file accessible from your computer.
- The "Catalog" option is used to find (in the image catalog) the images corresponding to the menu options (search performed in the following categories: "Main menu", "Tab menu" and "Menu option").
The available effects for displaying the menu optionsSeveral effects can be used to display the submenus of a menu. - expand and wipe (by default): When hovering the main option, the submenus are expanded with a sweeping effect until their final position. Click "Details" to configure the direction of the sweeping effect.
- fade (by default): When hovering the main option, the submenus are expanded with a progressive change of the style defined for the normal status to the style defined for the rollover. Click "Details" to configure the trigger and the duration of the effect.
- offset: During the rollover, the options of the submenu are expanded with an offset for each hovered option. Click "Details" to configure the trigger and the duration of the effect, as well as the offset according to the different axes.
- fast then slow: When hovering the main option, the submenus are expanded with a soft effect. Click "Details" to configure the duration of the animation.
- expand and stretch: When hovering the main option, the submenus are expanded with a stretched effect. Click "Details" to configure the duration of the animation.
Remark: The technology used for these effects is based on the CSS3 standard. Some browsers partially support the effects when the page is not in HTML 5 format. WEBDEV gives you the ability to: - add an effect: "Add an effect" button.
- delete an effect: select the effect and click the "-" button.
- organize the effects via the arrow buttons.
Caution: Some effects are not compatible and they cannot be used at the same time. To delete a menu: - Select the menu (the yellow border must not be displayed).
- Press the Del key to delete the options.
Related Examples:
|
Unit examples (WEBDEV): DHTML sidebar
[ + ] This example explains how to create a DHTML menu with WEBDEV. This example allows you to: - Create a DHML menu - Add a menu entry - Add a menu option
|
|
Unit examples (WEBDEV): The Linear Looper control
[ + ] This example explains how to use the "Linear Looper" control of WEBDEV. The "Linear Looper" control is used to create some graphic menus for example.
|
|
|
|
|