PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview of the Navigation Bar control
  • Control in a static or dynamic page
  • Creating a Navigation Bar control
  • Characteristics of Navigation Bar control with Burger created by default
  • Characteristics of Navigation Bar control
  • Choosing the display mode
  • Width of side panes
  • Available style options
  • Operations in the editor
  • Handling the control in the editor
  • Customizing the blades
  • Displaying the expanded area at run time
  • Using a preset action
  • Using the ..Collapsed property by programming
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 the Navigation Bar control

Control in a static or dynamic page

The Navigation Bar control is used to create a menu area that can easily adapt to the browser size. This area can contain all types of controls.
Two display modes are available:
  • The Extended mode: The navigation bar includes 3 sections: Left, Middle, Right. The 3 sections are displayed.
    A navigation bar in extended mode
    A navigation bar in extended mode
  • The Compact mode: The navigation bar includes the Left and Right sections as well as a Middle section that can be expanded (when clicking a button for example).
    A navigation bar in compact mode
    A navigation bar in compact mode
    A navigation bar in compact mode with the middle section expanded
    A navigation bar in compact mode with the middle section expanded
Note: This control is available for the pages in "Responsive Web Design" mode only.
Creating a Navigation Bar control
To create a Navigation Bar control:
  1. Create or open a page in "Responsive Web Design" mode.
  2. On the "Creation" pane, in the "Navigation" group, click "Navigation bar".On the "Creation" pane, in the "Navigation" group, expand "Navigation bar" and select the type of navigation bar to create:
    • Versions 22 and later
      Blank navigation bar: This navigation bar contains no control. It can be entirely customized. It can be used to manage a specific layout for example.
      New in version 22
      Blank navigation bar: This navigation bar contains no control. It can be entirely customized. It can be used to manage a specific layout for example.
      Blank navigation bar: This navigation bar contains no control. It can be entirely customized. It can be used to manage a specific layout for example.
    • Navigation bar with Burger: This navigation bar is filled beforehand to manage the display of menus in the different platforms. Some parameters are specified by default, like the change of display for the first blade.
  3. Click the position where the control will be created in the page. The control appears in creation mode.

Characteristics of Navigation Bar control with Burger created by default

The Navigation Bar control is automatically adapted to the Responsive Web Design mode:
  • In the greatest blade:
    In this blade:
    • the control is displayed in "Extended" mode,
    • the "Hamburger" button used to expand the middle area of the navigation bar is hidden.
    • Versions 22 and later
      a drop-down menu is displayed. This menu can be deleted or customized according to your requirements.
      New in version 22
      a drop-down menu is displayed. This menu can be deleted or customized according to your requirements.
      a drop-down menu is displayed. This menu can be deleted or customized according to your requirements.
  • In the lower blades:
    In these blades:
    • the Navigation Bar control is overloaded to be displayed in "Compact" mode.
    • the "Hamburger" button used to expand the middle area of the navigation bar is displayed. The action defined for this control is "Collapse/Expand the navigation bar". This action is used to display the middle section in popup format.
To display the control characteristics, select "Description" from the popup menu of control.
Characteristics of Navigation Bar control

Choosing the display mode

To configure the display mode of the Navigation Bar control:
  1. Display the description window of the Navigation Bar control.
  2. In the "GUI" tab, configure the display mode of the control:
  3. Validate.
Note: The display mode can be overloaded for each blade. By default:
  • When creating the Navigation Bar control with Burger, this overload is performed for all the lower blades.
  • Versions 22 and later
    When creating the blank Navigation Bar control, no overload is performed for the lower blades.
    New in version 22
    When creating the blank Navigation Bar control, no overload is performed for the lower blades.
    When creating the blank Navigation Bar control, no overload is performed for the lower blades.
Versions 22 and later

Width of side panes

The size of side panes is used to define the behavior of the two outside sections in the Navigation Bar control. You have the ability to use one of the following options:
  • No min width: If this option is chosen, the 3 panes always keep a proportional size.
  • Min edit width: If this option is chosen, the edit size of the blade defines the level from which the sise panes are not reduced anymore. From this level, only the middle pane is reduced.
  • Fixed width per blade: If this option is chosen, the width of left and right panes does not change in the Navigation Bar control. Only the middle pane is enlarged or reduced.
Reminder: The size of the different panes can be defined for each blade. In this case, the option chosen for the width of panes is applied to the new size of panes.
Tip: By hiding a side pane and by selecting "Fixed width per blade", the Navigation Bar control can be used to create a layout that includes a fixed section (for an ad banner for example) and a fluid section.
When creating the Navigation Bar control (blank or with Burger), the selected option is "Min edit width" by default.
New in version 22

Width of side panes

The size of side panes is used to define the behavior of the two outside sections in the Navigation Bar control. You have the ability to use one of the following options:
  • No min width: If this option is chosen, the 3 panes always keep a proportional size.
  • Min edit width: If this option is chosen, the edit size of the blade defines the level from which the sise panes are not reduced anymore. From this level, only the middle pane is reduced.
  • Fixed width per blade: If this option is chosen, the width of left and right panes does not change in the Navigation Bar control. Only the middle pane is enlarged or reduced.
Reminder: The size of the different panes can be defined for each blade. In this case, the option chosen for the width of panes is applied to the new size of panes.
Tip: By hiding a side pane and by selecting "Fixed width per blade", the Navigation Bar control can be used to create a layout that includes a fixed section (for an ad banner for example) and a fluid section.
When creating the Navigation Bar control (blank or with Burger), the selected option is "Min edit width" by default.

Width of side panes

The size of side panes is used to define the behavior of the two outside sections in the Navigation Bar control. You have the ability to use one of the following options:
  • No min width: If this option is chosen, the 3 panes always keep a proportional size.
  • Min edit width: If this option is chosen, the edit size of the blade defines the level from which the sise panes are not reduced anymore. From this level, only the middle pane is reduced.
  • Fixed width per blade: If this option is chosen, the width of left and right panes does not change in the Navigation Bar control. Only the middle pane is enlarged or reduced.
Reminder: The size of the different panes can be defined for each blade. In this case, the option chosen for the width of panes is applied to the new size of panes.
Tip: By hiding a side pane and by selecting "Fixed width per blade", the Navigation Bar control can be used to create a layout that includes a fixed section (for an ad banner for example) and a fluid section.
When creating the Navigation Bar control (blank or with Burger), the selected option is "Min edit width" by default.

Available style options

In the "Style" tab of the description window of Navigation Bar control, you have the ability to configure:
  • The CSS style of navigation bar,
  • The CSS style of expanded pane.
  • The effects used for the expand operation: expand with overlap, expand with push, ...
Operations in the editor

Handling the control in the editor

The Navigation Bar control is a container control whose aspect depends on the display mode used.
In the editor, the Navigation Bar control is divided into 3 panes: left (1), middle (2) and right (3). The size and the display of panes depend on the display mode of the Navigation Bar control.
  • In "Extended" mode: The 3 panes are displayed in the editor.
    The controls can be positioned in the different panes (logo, menu, links, ...).
  • In "Compact" mode: The middle pane (2) is not displayed anymore (it is hatched in the editor). The controls are found in the expanded area.
    To view and edit this expanded area in the editor, all you have to do is click the hatched area (you also have the ability to select "Edit the collapsed pane" from the popup menu of the control).
    The expanded area appears in edit (enclosed in a yellow border). You can perform the requested modifications. To exit from the edit mode, press the ESC key.
Notes:
  • Any type of control can be used in the panes.
  • The panes cannot be handled by programming.

Customizing the blades

The following elements found in the Navigation Bar control can be customized for each blade:
  • the position of controls in the panes.
  • the position of controls in the middle pane (collapsed or expanded mode).
  • the display mode of control (extended or compact).
  • the size of panes.
You also have the ability to hide a pane in a blade.
Displaying the expanded area at run time
Two methods can be used to display the middle area of the modification bar at run time:

Using a preset action

The preset action "Collapse/Expand the navigation bar" is used to display the middle area of the navigation bar in a popup. This action is available in the Button and Link controls for example:
Notes:
  • The control associated with the preset action "Collapse/Expand the navigation bar" is not necessarily found in the navigation bar.
  • By default, the Navigation Bar control with Burger is using a "Hamburger" button to expand the navigation bar.

Using the ..Collapsed property by programming

..Collapsed used in browser code on the Navigation Bar control is used to collapse or expand the middle area of the navigation bar.
You have the ability to use ..Collapsed in the rollover code of a control for example.
Minimum required version
  • Version 21
Comments
Click [Add] to post a comment