PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview of menu
  • Creating a menu
  • Creating a menu
  • Adding options
  • Displaying the menu description
  • Style of menu
  • Deleting a menu
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview of 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

Creating a menu

To create a menu:
  1. In the page editor, select "Insert .. Menu".On the "Creation" pane, in the "Navigation" group, click "Menu".
  2. 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.
  3. Give a name to the menu and validate the wizard. The menu automatically appears in the page with two default options.
  4. 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 popup menu of the menu options allows you to directly add the options into the page in edit. See Handling the menu options for more details.
Note: To exit from the menu in edit, press the [Esc] key (the yellow border disappears).

Displaying the menu description

To display the menu description:
  1. 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: display the popup menu of menu and select "Menu description".
  2. 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.
    • The "GUI" 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.
      • Versions 18 and later
        the available effects for displaying the menu options.
        New in version 18
        the available effects for displaying the menu options.
        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.
  • Versions 18 and later
    The available effects for displaying the menu options.
    New in version 18
    The available effects for displaying the menu options.
    The available effects for displaying the menu options.
Note: The "Catalog" button 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").Note: The Drop-down button 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").
Versions 18 and later
The available effects for displaying the menu options
Several effects are available for displaying the sub-menus of a menu.
  • swiped expanded effect (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-in effect (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 effect: 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.
  • soft expanded effect: 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.
  • stretched expanded effect: 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.
Note: 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.
New in version 18
The available effects for displaying the menu options
Several effects are available for displaying the sub-menus of a menu.
  • swiped expanded effect (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-in effect (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 effect: 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.
  • soft expanded effect: 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.
  • stretched expanded effect: 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.
Note: 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.
The available effects for displaying the menu options
Several effects are available for displaying the sub-menus of a menu.
  • swiped expanded effect (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-in effect (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 effect: 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.
  • soft expanded effect: 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.
  • stretched expanded effect: 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.
Note: 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.
Deleting a menu
To delete a menu:
  1. Select the menu (the yellow border must not be displayed).
  2. Press the [Del] key to delete the options.
Related Examples:
DHTML sidebar 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
The Linear Looper control 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.
Minimum required version
  • Version 9
Comments
Click [Add] to post a comment