Tuto WEBDEV 25

Part 8: Responsive Web Design 315 Controls specific to Responsive Web Design WEBDEV includes a specific control for Responsive Web Design: 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 study the operating mode of Navigation Bar control. 1. Open the "WW_Responsive" project if necessary. To do so, in WEBDEV’s home page, click "Tutorial" and select "Responsive Web Design (Exercise)". 2. Open the PAGE_NavigationBar page. ▶ The Navigation Bar control is the control found 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 control with an Image control to start the search. ▶ Let’s switch to Tablet mode: 1. Click the header of the Tablet slice. 2. Click the Navigation Bar control to select it: the middle section is hatched. ▶ From the Tablet slice, the Navigation Bar control makes the middle section invisible and adds a Hamburger menu in the left section. The "hamburger" menu expands a popup containing the controls of middle section. This popup can be customized, all you have to do is click the central pane. Then, this popup can be modified according to your own needs. ▶ Let’s study the content of middle section: 1. Click inside the hatched middle section. The popup is displayed: