How to build an accessible hamburger menu with HTML, SCSS & JS
Vložit
- čas přidán 8. 09. 2024
- 👕 NEW! Coder Coder Merch: coder-coder.co...
🔥 My course: Responsive Design for Beginners! coder-coder.co...
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-...
Source code: github.com/the...
Practical Accessibility by Sara Soueidan: practical-acce...
Lock scrolling package: github.com/ric...
____________________________
🎨 Get my VS Code theme: marketplace.vi...
💻 Become a full-stack web dev with Zero to Mastery: academy.zeroto...
🔽 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!
czcams.com/users/shortsgnXhaF9UTVs?feature=share
@@TheCoderCoder can you please do a react course
By far one of the best off-canvas menu tutorial I have seen so far. With great focus on accessibility, this helps a lot. The a11y field is still new to me, but I try to implement it more and more.
glad you found this helpful, and thanks for watching!
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
czcams.com/users/shortsgnXhaF9UTVs?feature=share
Ma'am you have my utmost respect!!! I learned sooo much just within the first 2 mins!!
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!!!
why aren't you posting anymore?
your editing skills and way of explaning is way too good
Don't know why, It's feels happy to see your videos coming.
christ been looking for a simple well explained tut for awhile , thank you
UL>(li>a)*3, have been looking for how to do this exact shortcut 😂
Excellent tutorial I am about to take that accessibility course too. We need more developers that are accessibility minded!
Very nice tutorial 👍. I went down the rabbit hole and tried to build it as an Astro component.. It did NOT go well 😂 .
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!
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!
PLEASE someone tell me the microphone she is using, it’s GORGEOUS 😻
It's an Electro-Voice RE320!
I like what you're doing, keep going ❤👍
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
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. 🙂🙏
More accessible components like this pls
Extremely good content! Thank you so much!
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!
How did you know i was looking for this ?😅
Like seriously me too, thanks
Glad this could help!!
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!!
How is the nav not causing horizontal scroll bar when off screen, you don’t even use overflow:hidden.
I think 🤔 Less word, more deep knowledge is best way to teach to everyone
That sounds good!
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!!
where is your bootcamp coming !!! :))) We neeed it :(((
what do you use for that html css code intelisence
what a great video :)
Thank you for a thorough and clear explanation.
New Subscriber 😮
You’re the best!!
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?
I forgot a shortcut that could make our code more tidied and prettier(sorry if my english is not good)🤔
Could someone tell me please 🤓
Nice to see you
Damn the video quality is unbeatable!
Thanks so much!!
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
cuteJavaScript ❤
This is so awesome! Thanks Jess!!! (Micha )
Oh hello!! And thank you for watching!
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
hey you look like SMRITI MANDHANA from INDIAN cricket team ! 🐱
video speed is pretty high couldn't understand properly
Change the playback speed
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
i just left in a mid because of classes i could not understand that
is it possible to build a webpage
with
NEXTJS +TYPESCRIPT+Tailwind+ MONGODB??
I call them san menu's because they look like 三 🤣 but mostly because i'm vegan 🥑
how you remember all of codes :(((((((( :D
You don't. You remember the ones that you are most familiar with, also you remember that there us something fit for the job and look for it on MDN, or you just have a problem and google it. Also you have autocomplete in vscode.
But you're not supposed to actually remember everything (the video is probably scripted and rehearsed).
vc e foda
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
your speed is to fast please slow
I turn playback speed to .5 but still
Decrease the playback speed and enjoy 🎉
I prefer turkey burgers 🍔
Where are you from
You can check in her about page. It's US, btw
czcams.com/users/shortsgnXhaF9UTVs?feature=share
Im more of a hot dog guy, but great video nevertheless.
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.
czcams.com/users/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 ❤👍