Animated mobile menu with CSS/JS | Build a responsive website from scratch (Part 3)

Опубликовано: 30 Сентябрь 2024
на канале: Coder Coder

40,313

1.1k

🔥 My course: Responsive Design for Beginners! https://coder-coder.com/responsive/

💻 Become a full-stack web dev with Zero to Mastery: https://academy.zerotomastery.io/a/af...

In this video you can watch me build a responsive website from scratch using HTML, CSS (SCSS) and vanilla JavaScript!

This video covers building the off canvas mobile menu and tweaking the overlay.

Full playlist here:    • Build a website from scratch - Fronte...
Challenge on Frontend Mentor: https://www.frontendmentor.io/challen...
Source code on GitHub: https://github.com/thecodercoder/fem-...
See the final website: https://codercoder-easybank.pages.dev/

00:00 - Intro
00:18 - Overview of steps
00:44 - Adding HTML markup
02:26 - Initial styles for menu
06:00 - Add spacing between menu and edge
09:33 - Put menu on top of overlay
10:15 - Use position absolute and transform to center menu
13:03 - Start animating the menu with some research!
14:20 - Fix overlay animation so you can click through when invisible
16:00 - Update JavaScript for fade-in animations
18:03 - Troubleshooting fade-in animations
20:11 - Fix overlay positioning and nav background
21:22 - Lock scrolling when menu is open

_____________________________________

SUPPORT THE CHANNEL
⭐ Join channel members and get perks:    / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: https://marketplace.visualstudio.com/...

WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: https://coder-coder.com/responsive/
🌟 Gulp for Beginners: https://coder-coder.com/gulp-course/

RECOMMENDATIONS
⌨ My keyboard-- get 10% off with code THECODERCODER -- https://vissles.com/?ref=mu96kxst5w
💻 Other gear -- https://www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- https://coder-coder.com/best-web-deve...
📺 My Favorite Courses -- https://coder-coder.com/best-web-deve...

🔽 FOLLOW CODER CODER
Blog -- https://coder-coder.com/
Twitter --   / thecodercoder
Instagram --   / thecodercoder

#webdevelopment #coding #programming