- Overview of menu
- Creating a menu
- Creating a menu
- Adding options
- Options available in a menu description
- Describing a menu
- Style of menu
- Deleting a menu
WEBDEV allows you to create a drop-down menu in your HTML pages. From the different options of this menu, you can:
- display pages,
- run the code of buttons found in the page,
In WEBDEV, the page menu is considered as being a control. This control:
- can be moved in the page,
- has its own style characteristics.
Creating a menu
To create a menu:
- On the "Creation" tab, in the "Navigation" group, click "Menu".
- The wizard for menu creation is automatically started. This wizard allows you to select the style of the menu or to create a new style ("I want to define a new style"). Creating a new style allows you to specify all the style characteristics for the generated menu. This operation can be performed thereafter.
- Give a name to the menu and validate the wizard. The menu automatically appears in the page with two default options.
- The menu can be moved in the page to the requested position.
To add options, click the selected menu: a yellow border appears. The popup menu of the menu options allows you to directly add the options into the page in edit. For more details, see Handling the menu options
: To exit from the menu in edit, press the Esc key (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: display the popup menu of menu and select "Description".
- If the yellow border is displayed: open the context menu of menu and select "Menu description".
- The different tabs are used to define the menu characteristics:
- The "General" tab is used to specify the name of menu, its orientation and the option selected by default.
Remark: The option selected by default can be modified through programming using the Selected property.
- The "UI" tab is used to specify whether the menu is visible or not.
- 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 sub-menus.
- the available effects for displaying the menu options.
Style of 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 sub-menus: caption, ...
- The image of sub-menus: background image and image of options that open a sub-menu.
- The available effects for displaying the menu options.
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 options
Several effects can be used to display the sub-menus of a menu.
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.
- expand and wipe (by default): When hovering the main option, the sub-menus are expanded with a sweeping effect until their final position. The "Details" button of this effect is used to configure the direction of the sweeping effect.
- fade (by default): When hovering the main option, the sub-menus are expanded with a progressive change of the style defined for the normal status to the style defined for the rollover. The "Details" button of this effect is used to configure the duration of the effect and its triggering.
- offset: During the rollover, the options of the sub-menu are expanded with an offset for each hovered option. The "Details" button of this effect is used to configure the duration of the effect, the offset performed according to the different axes and its triggering.
- fast then slow: When hovering the main option, the sub-menus are expanded with a soft effect. The "Details" button of this effect is used to configure the duration of the animation.
- expand and stretch: When hovering the main option, the sub-menus are expanded with a stretched effect. The "Details" button of this effect is used to configure the duration of the animation.
WEBDEV gives you the ability to:
Caution: Some effects are not compatible and they cannot be used at the same time.
- add an effect: "Add an effect" button.
- delete an effect: select the effect and click the "-" button.
- organize the effects via the arrow buttons.
To delete a menu:
- Select the menu (the yellow border must not be displayed).
- Press the Del key to delete the options.