PC SOFT

ONLINE HELP
 WINDEV, WEBDEV AND WINDEV MOBILE
New WEBDEV 28 feature!
  • In this lesson you will learn the following concepts
  • Controls specific to layouts
Lesson 8.3. Layouts: Managing menus
In this lesson you will learn the following concepts
  • Navigation Bar control with "Hamburger" menu.
  • Dissociating the menu and the menu options.
Lesson duration

Estimated time: 30 mn
Previous LessonTable of contentsNext Lesson
Controls specific to layouts
WEBDEV provides you with a specific control for layouts: the Navigation Bar control.
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.

  • Let's see how the Navigation Bar control works.
    1. Start WEBDEV 28.
    2. Go to the WEBDEV home page if necessary (Ctrl + <).
    3. On the home page, click "Tutorial", then in "Part 8 - Layouts", double-click "Layouts - Exercise".
    4. Open the PAGE_NavigationBar page.
  • The Navigation Bar control is the control at the top that contains the menu.
    Navigation Bar control
    This Navigation Bar control is divided into 3 sections:
    • On the left, the site logo.
    • In the middle, the site menu.
    • On the right, a search box with a search icon.
  • Let's create a layout:
    1. On the "Page" tab, in the "Layouts" group, expand "Layouts" and select "Add a layout from active view".
    2. In the window that appears, a layout adapted to phones and tablets is shown. Validate the window.
    3. Two layouts have been created in our example. These layouts are displayed as thumbnails, to the right of the "PAGE_NavigationBar" page. The mobile layout is automatically selected and displayed in the editor.
      Navigation Bar control

Note

The Navigation Bar control has advanced features. The automatic disassociation is not available for this control. There are specific options that need to be set to complete the dissociation.
  • First, let's configure the Navigation Bar control to be displayed on mobile devices.
    1. If necessary, select the Navigation Bar control in the mobile layout.
    2. Open the Navigation Bar control description window (Alt + Enter).
    3. In the "UI" tab, for "Display mode", click Dissociate to dissociate the display mode for each layout.
      Navigation Bar control
    4. In the window that appears, check "Dissociate value per layout", then in "Mobile", select "Compact".
      Dissociation by layout
      Confirm these changes.
    5. Validate the control description window.
    6. The Navigation Bar control appears in compact mode in the mobile layout.
  • Let's see now how the Navigation Bar control looks like in the different layouts.
    1. Open the "Desktop" layout: the entire navigation bar is displayed.
    2. Open the "Mobile" layout: the navigation bar is displayed in "Compact" mode.
    3. In the Mobile layout, select the Navigation Bar control: the center area is hatched.
      Navigation Bar control
  • In the Mobile layout, the center area of the Navigation Bar control is hidden.
    The "hamburger" menu expands a popup with the controls usually displayed the center area. To customize this popup, simply click the center pane. Then you can modify this popup as you wish.
  • Let's analyze the content of the center area:
    1. Click inside the hatched centered area. The popup is displayed in edit mode.
      Center area of the Navigation Bar control
      The yellow outline indicates that the control is in edit mode.
    2. You can see the site menu. The menu is laid out horizontally. To display it vertically, it is necessary to dissociate the orientation of the menu:
      • Open the menu description window (Alt + Enter).
      • In the "General" tab, click Dissociate to dissociate the orientation of the menu.
        Center area of the Navigation Bar control
      • In the window that appears:
        • Check "Dissociate value per layout".
        • For the mobile layout, select "Vertical for mobile".
        • Validate.
    3. Validate the description window.
    4. To exit the popup edit mode, press "Esc".
  • One last change is to resize the different areas of the navigation bar so that all the elements are displayed.
    1. Select the navigation bar.
      Use the red squares to resize the areas of the Navigation Bar control.
    2. Reduce the menu area and enlarge the search area. You will get the following result:
  • Save (Ctrl + S) and test the page (click Test page in the quick access buttons).
    1. The page is displayed in the browser.
    2. Resize the browser: the mobile layout is displayed.
  • Close the browser.
  • Now, we can test the site on a phone or a tablet:
    1. Expand the option in the quick access area and select "Test from a phone (access via a QR Code)".
    2. A window appears and shows a QR code that you can scan with your mobile device.
    3. Once you scan the QR code, the site is displayed on the device.
    4. The "Mobile" layout is automatically displayed.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 28
Comments
Click [Add] to post a comment