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
Start Adventure

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.

Code adventure mockup image

CSS Basics

Learn the basics of CSS, one of the core technologies for designing and building websites and applications.
Code adventure mockup image

CSS Flexbox Layout

Flexbox is a set of CSS properties that give you a flexible way to lay out content.

Code adventure mockup image

CSS Transitions and Transforms

With CSS transitions and transforms, you can create simple animations that enhance user interactions in websites and apps.

Code adventure mockup image

Interacting with the DOM

Along with selecting DOM elements in JavaScript we can also write code that gives elements behavior. In this course we will first explore how to watch for interaction and respond using the method addEventListener.
Code adventure mockup image

Animated Hamburger Menu

Want to set up a hamburger menu for your mobile navigation with a slick animation? It's not as hard as you may think. Follow along while I tackle this small UX feature!

  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.