Free CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.html

Hamburger menus are incredibly popular in sites, but building one that is animated, responsive, and uses no JavaScript is quite difficult. In this video I will show you how to build a hamburger menu with only CSS that is fully responsive and animated.


Materials/References:

GitHub Code: https://github.com/WebDevSimplified/css-only-hamburger-menu
Emmet Video: https://youtu.be/V8vizNQKtx0
Box Model Video: https://youtu.be/rIO5326FgPE
Box Model Article: https://blog.webdevsimplified.com/2021-12/box-model
CSS Variables Video: https://youtu.be/oZPR_78wCnY
CSS Variables Article: https://blog.webdevsimplified.com/2020-02/css-custom-properties
:has Selector Video: https://youtu.be/K6CWjkDgQnE
:has Selector Article: https://blog.webdevsimplified.com/2022-09/css-has-selector


Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:30 - Demo
01:20 - HTML
03:22 - CSS Setup/Variables
04:52 - Hamburger Menu Styles
10:30 - Hamburger Menu Animation
18:00 - Sidebar Animation
21:52 - Accessibility Styles


#HamburgerMenu #WDS #CSS