Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

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

via YouTube

Overview

Prepare for a new career with $100 off Coursera Plus
Gear up for jobs in high-demand fields: data analytics, digital marketing, and more.
Learn to build a responsive website from scratch using HTML, CSS (SCSS), and vanilla JavaScript. The course covers creating a hamburger menu and overlay animation, including troubleshooting and finding solutions to coding issues. The teaching method involves a step-by-step demonstration of the coding process, research, and problem-solving. This course is intended for beginners interested in front-end web development and responsive design.

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 .

Taught by

Coder Coder

Reviews

Start your review of Animated Hamburger Menu in CSS-JS - Build a Responsive Website from Scratch

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.