WDD 131: Dynamic Web Fundamentals

W02 Learning Activity: Responsive Menus

Overview

In this activity you will build a responsive menu using JavaScript. The menu adapts to different viewport sizes and responds when the user clicks a "hamburger" button (≡). In responsive design, the goal is to give users a positive, familiar experience across devices.

Associated Course Learning Outcome(s)

Develop responsive web pages that follow best practices and use valid HTML and CSS.

Prepare

Hamburger menus (or similar patterns) support responsive design by saving space and cleaning up layouts. The icon is widely recognized by users, even if they do not know it by name.

Here is an example from Google Maps.

Screenshot of Google Maps – Hamburger Button example

  1. Watch this example application of a responsive menu in this video demonstration:

Activity Instructions

  1. In your own CodePen account, fork this CodePen ☼ Responsive Menu – Start
  2. CSS: Move the hamburger menu button to the upper right corner by adding the appropriate CSS declarations where the blanks (______) are indicated.
  3. JavaScript: Complete the JavaScript code by filling in the blanks (______) within the menu button event listener.
    The click event toggles a class on the navigation element; that class already exists in CSS and controls whether the menu is shown.
  4. CSS: Change the hamburger button closing icon ❎ to something of your choice that would be appropriate.
    What does the :: syntax in the CSS rule selector do?

    The syntax selects a pseudo-elements to the selected element which in this case, allows us to add content to the existing content in the element.

  5. CSS: Wayfinding – Add a rule for the "active" class to indicate the current page by visually changing that menu item.
    In this example the active class is applied to the About page. 
    <a href="#" title="About Us" class="active">About Us</a>

    "Making it easy for people to navigate around a website or application helps everyone find what they need quickly and effectively. Clear wayfinding especially helps people with visual, mobility, or cognitive impairments who may otherwise find it difficult to understand where they are and how to get where they want to go." – Harvard University – Digital Accessibility

  6. Be sure to Save your changes on your CodePen.

CodePen: Example Solution