Responsive Navigation

The following files are required for this lesson:

Introduction

This lesson will be taught in two parts:

Part 1: Single-level Navigation
Part 2: Mulit-level Navigation

Demo Instructions

You can follow along with your instructor to complete this build and/or you can use this document as a guide in completing the demo build.

Download the demo-single-level-nav-main.zip file and extract its contents to a folder named demo-single-level-nav-main.
The completed output should look like:

Note: When the browser is resized, the menu will start to wrap to the next row.
The index.html file needs to be updated as follows:
1. Modify the <head> to be:
2. Add the following to the <body>:
The web page should now look like:

Question: What needs to be done to the menu?
Open the styles.css and add the following style rules:
1. Style the <body> element:
2. Style the <header>:
3. Style the menu <ul>:
4. Style the <a> elements of the menu:
  
  Your web page should now look like:
  
  Question: what needs to be done next?
5. Now add the media query:
  
  Question: What does this media query do? What size is 30em?
6. When you resize your browser, you should see something like:
The img folder contains several SVG files. As a challenge, add these to your menu items and modify your styles.css code to produce the following output:

Note: the green text is a hover effect.

Download the demo-multi-level-nav-main.zip file and extract its contents to a folder named demo-multi-level-nav-main.
The completed output should look like:
Note: The Events menu also ahs a dropdown menu.
Add the following code to index.html:
1. Update the <head> to be:
2. Add the <header>:
3. Add the sub-menu for Books:
4. Add the sub-menu for Events:
5. Add the SVG symbol to indicate there is a sub-menu (it is the same SVG for both Books and Events) after the menu item name and before the <a> tag:
  
  The code is easier to just copy and paste the <path d="…"> from the SVG file in the img folder into your code editor.
Running index.html in your browser should now look like:

Question: What needs to be done now?.
Open your styles.css file and add the following style rules:
1. Style the <body> and <header> elements:
2. Add a style rule for the <ul> in the menu:
3. Style the <a> elements in the menu:
4. Add a hover effect to the menu links:
5. Style the sub-menus and the SVG:
Refreshing your browser, you should now see something like:

Question: What is next?.
It is time to add a media query to styles.css:
1. Add a media query and style the menu:
2. Add another rule to your media query to style the list items:
3. Add rules to style the sub-menu:
4. Add rules to style the dropdown for the sub-menus:
5. There does not appear to be a significant change if you now refresh your browser. You need to hide and position the sub-menus by adding the following rule:
6. Now add some layout rules for the menus:
  
  The sub-menus are hidden but still affect the display of the menu:
  
  Notice the vertical scroll bar which indicates there is still something there.
  Question: How can this be fixed?
7. Add a rule for the hover state of the sub-menus:
8. Add a transition effect for the menu:
9. Add accessibility and tab navigation:
  
  Refresh your browser and use the tab key to tab through the menus.
10. Add another media query:
  
  Question: What happened?