Animated Hamburger Menu in CSS-JS - Build a Responsive Website from Scratch

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Learn how to create an animated hamburger menu using CSS and JavaScript in this hands-on tutorial video. Follow along as the instructor builds a responsive website from scratch, focusing on the hamburger menu and overlay animation. Discover the process of writing code, troubleshooting issues, and finding solutions while gaining insights into the instructor's thought process. Cover topics such as using helper CSS classes with transforms, adjusting transform-origin properties, writing JavaScript for toggling classes, creating CSS keyframe animations for fading effects, and solving animation challenges. By the end of this 32-minute tutorial, you'll have a functional and visually appealing hamburger menu animation for your responsive website.

Syllabus

- Intro.
- Research hamburger animation.
- Using a helper CSS class with transform to build animation.
- Adjust transform-origin to fix "X" angles.
- Research transform-origin and adjust styles.
- Write JavaScript to add/remove helper class from hamburger.
- Fine tuning "X" angles.
- Start building overlay.
- Troubleshooting the overlay gradient background.
- Positioning the overlay under the header.
- Update SCSS/JS to put all "open" styles under the header.
- Start working on animating the overlay.
- Create CSS keyframe animation for fading in/out.
- Troubleshooting overlay animation.
- Got fade in animation working!.
- Display properties can't be animated.
- Create fade-out animation.
- Move fade animation to helper class for reusability.
- Troubleshooting fade-out not working.
- Solving with visibility: hidden!.
- Finally working, SO HAPPY :D.
- Closing .