WDD 131: Dynamic Web Fundamentals

Responsive "Hamburger" Menu

Overview

The purpose of this activity is to build a responsive menu using JavaScript. The menu will adapt to different viewport sizes and also respond when the user clicks on a 'hamburger button' (≡). In responsive design, our objective is to provide users with a positive and familiar experience.

Associated Course Learning Outcome(s)

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

Prepare

"Hamburger menus" or equivalent structures support responsive design. They allow us to clean up layouts because they save space on the page. They are well-recognized by users, even if they may not know that the common symbol is called a "hamburger menu".

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 (copy) this CodePen: Responsive Menu - Start
  2. CSS: Move the hamburger menu button to the right upper corner of the screen by supplying appropriate CSS declarations where there are currently blanks (______).
  3. JavaScript: Complete the JavaScript code by filling in the three (3) blanks (______) within the menu button event listener.
    This example listens to a user initiated event and toggles the given class for the navigation element. The class name already exists in CSS and is ready to be applied.
  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 let the user know what page they currently have open by visually changing the appearance of the one menu item.
    In this example the active class is being 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