How to build an accessible hamburger menu with HTML, SCSS & JS
HTML-код
- Опубликовано: 29 янв 2024
- 👕 NEW! Coder Coder Merch: coder-coder.com/merch
🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/
In this video, I show you how to build an animated hamburger menu from scratch with HTML, SCSS, and JavaScript, that is accessible for screen readers and keyboards.
🌟 LINKS & RESOURCES 🌟
Live website: mellow-cocada-662afb.netlify....
Source code: github.com/thecodercoder/spac...
Practical Accessibility by Sara Soueidan: practical-accessibility.today/
Lock scrolling package: github.com/rick-liruixin/body...
____________________________
🎨 Get my VS Code theme: marketplace.visualstudio.com/...
💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/af...
🔽 FOLLOW CODER CODER
Blog -- coder-coder.com/
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#css #javascript #html
There is a "bug" in the code!
Opening the site on desktop initially has "inert" attribute on ".topnav__menu" element, despite the "setupTopNav" function and media.matches functionality, making the links in the element inactive and un-targetable, and it persists on viewport size change, too.
Just found out about the bug, didn't have time to look into it. Maybe tomorrow I'll have time to look into it and hopefully will find the problem.
Thank you for finding it! I've fixed the code in the GitHub repo. What happened was if it loads on desktop, it loads closeMobileMenu() which sets the Top Nav menu to "inert" AFTER removing the "inert" attribute. I've moved the "topNavMenu.removeAttribute('inert')" line after closeMobileMenu() now so that it will not mistakenly get set to "inert".
Ah, yes! CloseMobileMenu function was setting it again...
Thanks for the reply!
ruclips.net/user/shortsgnXhaF9UTVs?feature=share
@@TheCoderCoder can you please do a react course
Ma'am you have my utmost respect!!! I learned sooo much just within the first 2 mins!!
christ been looking for a simple well explained tut for awhile , thank you
Thank you for a thorough and clear explanation.
Don't know why, It's feels happy to see your videos coming.
Excellent tutorial I am about to take that accessibility course too. We need more developers that are accessibility minded!
This is awesome! I didn't know about inert attribute. There aren't enough videos on yt that approach builds with accessibility in mind , It'd be nice to to see more videos like these, carousels, modals etc. Thanks for this awesome video!
Thanks for watching! I'll try to do more of these in the future
ruclips.net/user/shortsgnXhaF9UTVs?feature=share
Extremely good content! Thank you so much!
ooo merch store! Might add another hoodie to the closet :D Much appreciated for the hamburger menu tutorial. Good to practice as well
Thanks so much!
I like what you're doing, keep going ❤👍
UL>(li>a)*3, have been looking for how to do this exact shortcut 😂
So happy to see some focus on accessibility! Not enough devs pay attention to it, sadly. Nice video!
Thanks for watching! I'm trying to learn more about accessibility and passing the info on to everyone
@@TheCoderCoder that is awesome, waiting for more!!!
what a great video :)
You’re the best!!
Awesome video!! Thank you!
Do you by any chance plan on extending this video to add drop-down menu items?
That's a great idea, I will keep it in mind. Thank you for watching!
More accessible components like this pls
Hey Codercoder,
I just finished my first website design and I'm about to start building but I want to do things right, and also not overthink it.
I could really use a tutorial, or even a small task-summary to get me going.
My initial plan was to use html,css,js and scss for the efficiency. But since it's a pretty basic informative website with a little bit of GSAP I'm not sure if SCSS is worth it?
You seem a big Vite fan but might be a bit too much for me?
I just want to create a website locally and upload it to Wordpress. (probably has to be through a theme but since I want to create everything from header - to footer idk why I'd need a theme?)
I hope you have something to get me going. Thanks!!
Nice to see you
New Subscriber 😮
Great tutorial !! Was looking for a way to make my menu more accessible, and your video helped me a lot! I've got a question tho, why did you use two buttons instead of one to toggle the menu? Is there a reason behind that or just a coding preference?
You could probably use just one button to toggle, but my guess is that having separate open and close buttons might be easier for screen readers to navigate?
@@TheCoderCoder It might be easier true, but most devs commonly use one button and animate the icon from a burger to a cross... I'll see what I can do to make it work with accessibility. Thank you again for all the amazing tutorials!!
Please I don't understand the way you write most your selectors
For example at 2:12 the class topnav__menu but in css you just write &__menu
What's scss
It's a CSS pre-processor that lets you nest things. Check out my intro to Sass video on my channel!
I would like to point out that inert is applied to topnav__menu even on desktop. So simple solution for that is to move the closeMobileMenu() before the removing the inert attribute in the setupTopNav function.
Thank you so much! I've fixed the bug in the code :D
Can you use overflow:hidden; instead of scroll lock? 11:00
The scroll lock package does use overflow hidden, and some other things that help with iOS
How is the nav not causing horizontal scroll bar when off screen, you don’t even use overflow:hidden.
where is your bootcamp coming !!! :))) We neeed it :(((
hi, I like all your videos, can you make a video about learning javascript or something about javascript, because I like javascript and thank you. 🙂🙏
How did you know i was looking for this ?😅
Like seriously me too, thanks
Glad this could help!!
Damn the video quality is unbeatable!
Thanks so much!!
Thank you for creating such a helpful tutorial and mentioning Sara Soueidan. Could you please change that flag?
Thanks for watching! what flag do you mean?
This doesn't work at all on Safari, and I've been trying to figure out why for the last couple days on my site that uses a menu inspired by yours. Any chance you know why it doesn't work for Safari?
you're welcome buckos
SOLUTION FOUND: syntax error with + combinator in the CSS :
replace + combinator (adjacent sibling) with ~ combinator (general sibling)
correct syntax so that the combinator is outside the brackets {}
ex:
BROKEN
#openbutton[aria-expanded="true"] {
+ #menu{translate: 0;}
}
FIXED
#openbutton[aria-expanded="true"] ~ #menu {
translate: 0;
}
I am not sure why she wrote it the first way, but the second way is correct syntax for CSS, and I hate that it took me 14 hours to realize this was the issue. SMH
anyway. You're welcome for my suffering all who see/use this
Very useful tutorial video thank you. Are you a front-end dev or a full-stack dev Jess?
Thanks! Used to do back end and full stack, but now mainly frontend
cuteJavaScript ❤
I think 🤔 Less word, more deep knowledge is best way to teach to everyone
That sounds good!
hey you look like SMRITI MANDHANA from INDIAN cricket team ! 🐱
is it possible to build a webpage
with
NEXTJS +TYPESCRIPT+Tailwind+ MONGODB??
video speed is pretty high couldn't understand properly
Change the playback speed
vc e foda
This is so awesome! Thanks Jess!!! (Micha )
Oh hello!! And thank you for watching!
i just left in a mid because of classes i could not understand that
how you remember all of codes :(((((((( :D
Where are you from
You can check in her about page. It's US, btw
ruclips.net/user/shortsgnXhaF9UTVs?feature=share
your speed is to fast please slow
I turn playback speed to .5 but still
Decrease the playback speed and enjoy 🎉
Im more of a hot dog guy, but great video nevertheless.
I prefer turkey burgers 🍔
This isn't a beginner friendly channel for web development
Why?
You won't understand everything from this channel when you are a beginner. If you understand then you aren't beginner.@@mochamadrasyad338
I think so
This isn't a tutorial video where you'll be taught from scratch , it was made to address a specific situation alone. You shouldn't go around saying it's NOT beginner friendly if all you are ever gonna do is keep jumping from one tutorial to another . That's not at all gonna help in you getting good at development
Cry me a river
Idon't see any reason to create something from scratch, it's useless
It's for learning and practice. And it's not useless because it's considering accessibility which many hamburger menus don't consider, so it can allow you to adjust a hamburger menu from a third party into an accessible one.
Useless to create something from?!
Please tell me its a joke.
ruclips.net/user/shortsgnXhaF9UTVs?feature=share
please give right and short class name topnav_link topnav_links is this make any sense very bad
I like what you're doing, keep going ❤👍