"Java Data Structures - Retired" was retired on May 31, 2019. You are now viewing the recommended replacement.

Heads up! To embark on an Adventure or participate further, sign in with your Treehouse account or enroll in your free, 7-day trial.

Treehouse Code Adventures > Hamburger Menu

Hamburger Menu

Hamburger Menu

Create a hamburger menu that can be used in the mobile view to navigate between pages on the site.

Mobile icon

Created: 11/06/2023 by Dustin Usey

Skill level: beginner

Topics used: HTML CSS JavaScript

Estimated completion time: 30 Minutes

    Create a hamburger menu that can be used in the mobile view to navigate between pages on the site.

  1. 0

    To begin, click "Start Adventure" at the top of the page and then download your starter files.

  2. 1

    Use CSS Flexbox or Grid to lay out the hamburger menu.

  3. 2

    Use JavaScript to add event listeners to the hamburger menu.

  4. 3

    Use JavaScript to toggle the menu open and closed.

  5. 4

    Extra Challenge: Use CSS transitions or animations to animate the hamburger menu when it opens and closes.

  6. 5

    Extra Challenge: Create a desktop view of the navigation that is hidden in the mobile view. Use CSS media queries to hide the hamburger menu and display the desktop navigation instead.

  7. 6

    Extra Challenge: Expanding the browser window into desktop screen sizes will close the hamburger menu if it's open and the menu icon should be hidden, displaying the desktop navigation instead.