Hamburger Menu
Hamburger Menu
Create a hamburger menu that can be used in the mobile view to navigate between pages on the site.
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.
CSS Basics
Learn the basics of CSS, one of the core technologies for designing and building websites and applications.
CSS Flexbox Layout
Flexbox is a set of CSS properties that give you a flexible way to lay out content.
CSS Transitions and Transforms
With CSS transitions and transforms, you can create simple animations that enhance user interactions in websites and apps.
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.
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!
-
0
To begin, click "Start Adventure" at the top of the page and then download your starter files.
-
1
Use CSS Flexbox or Grid to lay out the hamburger menu.
-
2
Use JavaScript to add event listeners to the hamburger menu.
-
3
Use JavaScript to toggle the menu open and closed.
-
4
Extra Challenge: Use CSS transitions or animations to animate the hamburger menu when it opens and closes.
-
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.
-
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.