- 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.
Estimated time: 30 mn
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.
- Start WEBDEV 28.
- Go to the WEBDEV home page if necessary (Ctrl + <).
- On the home page, click "Tutorial", then in "Part 8 - Layouts", double-click "Layouts - Exercise".
- Open the PAGE_NavigationBar page.
- The Navigation Bar control is the control at the top that contains the menu.
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:
- On the "Page" tab, in the "Layouts" group, expand "Layouts" and select "Add a layout from active view".
- In the window that appears, a layout adapted to phones and tablets is shown. Validate the window.
- 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.
|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.
- If necessary, select the Navigation Bar control in the mobile layout.
- Open the Navigation Bar control description window (Alt + Enter).
- In the "UI" tab, for "Display mode", click to dissociate the display mode for each layout.
- In the window that appears, check "Dissociate value per layout", then in "Mobile", select "Compact". Confirm these changes.
- Validate the control description window.
- 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.
- Open the "Desktop" layout: the entire navigation bar is displayed.
- Open the "Mobile" layout: the navigation bar is displayed in "Compact" mode.
- In the Mobile layout, select the Navigation Bar control: the center area is hatched.
- 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:
- Click inside the hatched centered area. The popup is displayed in edit mode.
The yellow outline indicates that the control is in edit mode.
- 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 to dissociate the orientation of the menu.
- In the window that appears:
- Check "Dissociate value per layout".
- For the mobile layout, select "Vertical for mobile".
- Validate the description window.
- 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.
- Select the navigation bar.
Use the red squares to resize the areas of the Navigation Bar control.
- Reduce the menu area and enlarge the search area. You will get the following result:
- Save (Ctrl + S) and test the page (click in the quick access buttons).
- The page is displayed in the browser.
- Resize the browser: the mobile layout is displayed.
- Now, we can test the site on a phone or a tablet:
- Expand the option in the quick access area and select "Test from a phone (access via a QR Code)".
- A window appears and shows a QR code that you can scan with your mobile device.
- Once you scan the QR code, the site is displayed on the device.
- The "Mobile" layout is automatically displayed.