Formatting layouts and navigation for mobile 1 Objectives
After applying a general style to your webpage, you will now format the layout and navigation of the document by creating a hamburger icon and sliding drawer menu that enables users to browse across your web pages on mobile screens. By the end of this tutorial, you will be able to: Develop fluid page layouts and responsive navigation in CSS. Implement document viewports and media queries, adhering to responsive design principles. Demonstrate advanced CSS combinators for selecting HTML elements and pseudo-classes. Create icons and motion graphic effects using the CSS3 transform and transition properties.
Figure 1 – A wireframe for the tutorial home page formatted for mobile devices.
1
2 Set up the site
1. From your computer, duplicate the tut02 folder containing the HTML5 web pages, CSS scripts, images and folders you created for tutorial 2.
2. Rename the copied folder to tut03 on the desktop or a location of your choice.
3. Open Dreamweaver.
Note: Close any opened documents in Dreamweaver before setting up a new site. This will prevent you from editing documents that are saved in previous tutorial folders!
4. From the dropdown menu select Site > New Site
5. Inside the Site Name field, type a site name of your choice (Tutorial 03 YOUR NAME).
6. Connect the Local Site Folder property to the tut03 folder you created in step 1.
7. Choose Save and then Done. The files and folders in the tut03 folder should appear in the Files panel.
8. From the Files panel, double click index.html.
2
3 Prepare the web page for responsive navigation
You will now set up the HTML elements required for a functioning hamburger button and sliding menu panel.
An input element will be used to control the visibility of #menu-list.
Figure 2 – The DOM structure of the hamburger icon and sliding panel.
In index.html,
1. Create a
This container will be formatted to display as a panel that slides onto the page when a user taps on the hamburger icon. The three hyperlinks and their respective columns created in tutorial 2 will be nested within the panel.
3. Above the menu-list, create an element. Ensure that it is nested within the
Reference – https://www.w3schools.com/tags/tag_input.asp
The input element is used on web documents to define form components where users can “input” their data like text fields, dropdown option menus and checkboxes. For this task, an invisible checkbox will be used to control when the sliding panel should appear or be removed from the page.
3
5. Beneath the input element (and above the #menu-list div element), create another
These three span elements will be formatted to create our hamburger button or trigram symbol (☰) with box model CSS properties.
4 Defining a viewport for the web page
Reference – https://www.w3schools.com/css/css_rwd_viewport.asp
The viewport refers to the visible area of a web page when displayed on a browser. Prior to formatting the web document for responsive design, a viewport should be defined to specify how dimensions of the document layout should scale when displayed across different devices.
In index.html,
1. Locate the
element at the top of the document. 2. Create a new element. 3. Add a name attribute to the meta element and assign the value “viewport”. 4. Add a content attribute to the meta element and assign the value “width=device-width, initial-scale=1.0”. width=device-width sets the width of the page to follow the screen-width of the device and this will vary depending on the device. initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.Figure 3 - The formatting of index.html on a mobile web browser without the viewport meta tag (left) and with the viewport meta tag (right) 4
5 Creating media rules for responsive design Reference – https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You will now apply media queries to your stylesheet to check the current width of the viewport and the type of device the web page is displayed on. The home page will be formatted for two views, desktop viewports that wider than 768 pixels and all other screen viewports that are shorter than 768 pixels wide.
5.1. Desktop media query In style.css,
1. Underneath the @import rule created in tutorial 2, add a new media rule:
/* DESKTOP */ @media screen and (min-width: 768px){ } /* End of desktop media rule */
All the formatting for the page’s navigation on desktop should be nested in the newly created media rule.
2. Locate the .column selector and declaration block you created in tutorial 2. 3. Cut the entire .column selector and declaration block using Ctrl + X or CMD + X. 4. Paste .column selector and declaration block inside of the desktop media rule declaration block using Ctrl + V or CMD+ V. 5. Now do the same for the nav a and nav a:hover selectors and declaration blocks you created in tutorial 2. 6. Finally, nest a group combinator inside of the media rule that selects both the .nav-icon class and the nav input. a. In the declaration block for this group combinator, set the display property to none. Now the div container for the hamburger icon and the checkbox will be removed from the page when the minimum width of the viewport is 768 pixels.
5
5.2 Mobile media query
1. Above the @media rule you created for desktop formatting, add a new media rule:
/* TABLET AND MOBILE */ @media screen and (max-width: 768px){ } /* End of tablet and mobile media rule */
All the formatting for the page’s navigation on viewports narrower than 768 pixels will be nested in the newly created media rule. 2. Inside of the tablet and mobile media query, add a class selector for .column. a. In the .column declaration block, set the width property to 100 per cent. Each of the columns in the navigation container will now widen to the full width of the row.
6 Style the hamburger button and menu panel. Reference - https://www.w3schools.com/cssref/pr_pos_z-index.asp Inside of the tablet and mobile media rule in style.css, 1. Create a new internal comment: /* HAMBURGER ICON – TRIGRAM */ 2. Crete a selector and declaration block for the .nav-icon class: a. Set the display property to block. b. Set the position to fixed. c. Set the top property to 1em; d. Set the right property to 1em; e. Set the height to 10px; This formatting will move the div container holding the three span elements to the top right corner of the web page where it will remain. This is the result of its position being fixed to the viewport.
3. Create a selector and declaration block for span elements nested inside of the .nav-icon class. Use a descendant combinator (.nav-icon span). a. Set the display to block. b. Set the width to 33px. c. Set the height to 4px. d. Set the margin-bottom property to 5px; e. Set the position to relative. f. Set a background colour that contrasts with the header’s background colour. g. Set the border-radius to 3px. h. Set the z-index to 1. The z-index property allows developers to control what elements are above or below a stack of elements positioned on top of each other. You will now position the checkbox to appear on top of your newly created hamburger icon. 6
4. Create a selector and declaration block for the input element nested inside of the nav container. Use a descendant combinator. a. Set the display to block. b. Set the width to 33px. c. Set the height to 27px. d. Set the position to fixed. e. Set the top property to 1em. f. Set the right property to .8em. g. Set the z-index to 2. h. Finally, hide the checkbox by setting its opacity to 0. Unlike display:none; which removes an element from the page – setting an opacity of 0 will simply hide the checkbox from view. However, it will still be accessible by users and can be toggled to control the visibility of the sliding menu panel.
5. Now to set up the sliding panel! Create a selector and declaration block for the #menu-list id you assigned to a div element. a. Set the position to fixed. b. Set the top property to 3.5em (this value might need to be tweaked depending on the height of your header. The panel should sit nicely beneath the header as shown in Figure). c. Set the right property to 0. d. Specify a background-color that contrasts with the text colour of the navigation hyperlinks. e. Set the width to 12em. f. Set the height to 17em.
6. Finally, select the elements nested in the navigation container. Use a descendant combinator. a. Set the display to block. b. Set the padding to 2em 0; (This will add space of 2 times the default font size to the top and bottom of each hyperlink, increasing the clickable/tappable space, while not adjusting the space to the left or right sides.). c. Set the text colour so that it contrasts with the background colour you’ve selected. d. Set the text-align to center. e. Set the text-decoration to none. f. Set the font-weight to bold.
Congratulations! You now have all the components necessary to proceed with creating a functioning hamburger button and sliding drawer menu.
7
Figure 4 - The formatting of all elements nested within the navigation container for mobile viewports. 7. Transform and advanced CSS combinators to manipulate HTML elements Reference - https://www.w3schools.com/cssref/css3_pr_transform.asp
Unique to CSS3 is the transform property that enables HTML elements to be rotated, scaled, skewed or moved across a page (“translated”). It modifies the coordinates of elements on a web page. Combined with pseudo-classes and the transition property, visually engaging and attention grabbing motion graphics can be implemented into a website’s user interface.
This task will modify the coordinates of navigation elements in response to whether the invisible checkbox has been checked or not. The state of the checkbox can be identified by a pseudo-class.
Inside of the tablet and mobile media rule in style.css, 1. Locate the .nav-icon span selector you created in section 6. a. Add transform-origin property set to 4px 0px. Reference - https://www.w3schools.com/cssref/css3_pr_transform-origin.asp transform-origin specifies coordinates of an HTML element for where it will rotate, move or scale based along its horizontal (first value) and vertical axis (second value). b. Add a transition property set to transform .5s, opacity .5s;
2. Locate the #menu-list selector you created in section 6. a. Set the transform-origin to 0% 0%; b. Set the transform property to translate(100%, 0); This will move the sliding panel to the right side of the browser outside of the viewport when it is initially rendered on the page. c. Set the transition property to transform .5s;
8
7.1 :first-child, :last-child and nth-last-child(n) pseudo-classes Reference - https://dockyard.com/blog/2017/12/20/first-child-last-child-nth- child-and-not-nth-child
Now that all elements are in place for mobile navigation, the and #menu-list elements can be formatted with the transform property based on the state of the invisible checkbox.
The :first-child, :last-child and :nth-last-child(n) pseudo-classes will be important for isolating a specific tags that make up the hamburger icon with a view to change each span’s shape and coordinates.
7.1.1. The first element of the trigram (☰).
Note: The first-child pseudo-class specifically selects the first instance of a certain element on the page. For this tutorial, you will select the first tag nested within the