How to build an accessible hamburger menu with HTML, SCSS & JS

Подписаться 492 тыс.

Просмотров 22 тыс.

50% 1

👕 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

Опубликовано:

29 янв 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 85

@MarshallSC1 3 месяца назад

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.

@TheCoderCoder 3 месяца назад

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".

@MarshallSC1 3 месяца назад

Ah, yes! CloseMobileMenu function was setting it again... Thanks for the reply!

@CoderAndDeveloperthings 2 месяца назад

ru-vid.comgnXhaF9UTVs?feature=share

@monzerfaisal3673 3 месяца назад

Ma'am you have my utmost respect!!! I learned sooo much just within the first 2 mins!!

@user-pw2mi2yf5u 3 месяца назад

christ been looking for a simple well explained tut for awhile , thank you

@VinayKumar-cm2nn 3 месяца назад

Don't know why, It's feels happy to see your videos coming.

@SnakesRaven Месяц назад

Thank you for a thorough and clear explanation.

@johnsonb8727 Месяц назад

Excellent tutorial I am about to take that accessibility course too. We need more developers that are accessibility minded!

@manuelsanchezweb 3 месяца назад

Extremely good content! Thank you so much!

@waltersumofan 3 месяца назад

ooo merch store! Might add another hoodie to the closet :D Much appreciated for the hamburger menu tutorial. Good to practice as well

@TheCoderCoder 3 месяца назад

Thanks so much!

@buildervision7082 3 месяца назад

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!

@TheCoderCoder 3 месяца назад

Thanks for watching! I'll try to do more of these in the future

@CoderAndDeveloperthings 2 месяца назад

ru-vid.comgnXhaF9UTVs?feature=share

@onetwothree123- 3 месяца назад

I like what you're doing, keep going ❤👍

@tristangibbs8488 3 месяца назад

So happy to see some focus on accessibility! Not enough devs pay attention to it, sadly. Nice video!

@TheCoderCoder 3 месяца назад

Thanks for watching! I'm trying to learn more about accessibility and passing the info on to everyone

@dashingpix 3 месяца назад

@@TheCoderCoder that is awesome, waiting for more!!!

@ifeanyinnaemego 3 месяца назад

UL>(li>a)*3, have been looking for how to do this exact shortcut 😂

@Tony.Nguyen137 3 месяца назад

More accessible components like this pls

@lvekua 3 месяца назад

Awesome video!! Thank you! Do you by any chance plan on extending this video to add drop-down menu items?

@TheCoderCoder 3 месяца назад

That's a great idea, I will keep it in mind. Thank you for watching!

@AlThePal78 3 месяца назад

what a great video :)

@harpo187bling 3 месяца назад

Nice to see you

@godswillumukoro8908 3 месяца назад

You’re the best!!

@tommieirl1 Месяц назад

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!!

@ghanankoaa966 3 месяца назад

New Subscriber 😮

@khalil_art 3 месяца назад

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?

@TheCoderCoder 3 месяца назад

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?

@khalil_art 3 месяца назад

@@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!!

@sul-dev 3 месяца назад

Can you use overflow:hidden; instead of scroll lock? 11:00

@TheCoderCoder 3 месяца назад

The scroll lock package does use overflow hidden, and some other things that help with iOS

@Ebishenmansfield 3 месяца назад

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.

@TheCoderCoder 3 месяца назад

Thank you so much! I've fixed the bug in the code :D

@mukesh-mahato 3 месяца назад

How did you know i was looking for this ?😅

@thefirstplayer7964 3 месяца назад

Like seriously me too, thanks

@TheCoderCoder 3 месяца назад

Glad this could help!!

@opencode1 3 месяца назад

where is your bootcamp coming !!! :))) We neeed it :(((

@Youssef-pk2hw 3 месяца назад

Thank you for creating such a helpful tutorial and mentioning Sara Soueidan. Could you please change that flag?

@TheCoderCoder 3 месяца назад

Thanks for watching! what flag do you mean?

@JohnWick-hp8wn 3 месяца назад

Damn the video quality is unbeatable!

@TheCoderCoder 3 месяца назад

Thanks so much!!

@mr-smartchoice 3 месяца назад

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

@TheCoderCoder 3 месяца назад

It's a CSS pre-processor that lets you nest things. Check out my intro to Sass video on my channel!

@gdeveloper3 3 месяца назад

I think 🤔 Less word, more deep knowledge is best way to teach to everyone

@TheCoderCoder 3 месяца назад

That sounds good!

@BugraBasbostanci 3 месяца назад

Very useful tutorial video thank you. Are you a front-end dev or a full-stack dev Jess?

@TheCoderCoder 3 месяца назад

Thanks! Used to do back end and full stack, but now mainly frontend

@sr-studio Месяц назад

cuteJavaScript ❤

@vioLeTAckerMan 2 месяца назад

hey you look like SMRITI MANDHANA from INDIAN cricket team ! 🐱

@kannandb7473 2 месяца назад

is it possible to build a webpage with NEXTJS +TYPESCRIPT+Tailwind+ MONGODB??

@user-oi5df4sz3y 11 дней назад

i just left in a mid because of classes i could not understand that

@Marieshengelia 2 месяца назад

how you remember all of codes :(((((((( :D

@shashank8575 3 месяца назад

video speed is pretty high couldn't understand properly

@user-in8tq8tz3f 10 дней назад

Change the playback speed

@dhananjaythakur5190 3 месяца назад

Where are you from

@alisanan9090 3 месяца назад

You can check in her about page. It's US, btw

@CoderAndDeveloperthings 2 месяца назад

ru-vid.comgnXhaF9UTVs?feature=share

@Dom-zy1qy 3 месяца назад

Im more of a hot dog guy, but great video nevertheless.

@MohamedAhmad-yx2bf 3 месяца назад

your speed is to fast please slow

@ghanankoaa966 3 месяца назад

I turn playback speed to .5 but still

@joeokat 3 месяца назад

Decrease the playback speed and enjoy 🎉

@illegaldream 3 месяца назад

This isn't a beginner friendly channel for web development

@mochamadrasyad338 3 месяца назад

Why?

@illegaldream 3 месяца назад

You won't understand everything from this channel when you are a beginner. If you understand then you aren't beginner.@@mochamadrasyad338

@taiwolukman2499 3 месяца назад

I think so

@b0nes2704 3 месяца назад

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

@gintoki_sakata__ 3 месяца назад

Cry me a river

@bobasquid3339 3 месяца назад

I prefer turkey burgers 🍔

@cubespeed100 3 месяца назад

This is so awesome! Thanks Jess!!! (Micha )

@TheCoderCoder 3 месяца назад

Oh hello!! And thank you for watching!

@nested9301 3 месяца назад

Idon't see any reason to create something from scratch, it's useless

@sul-dev 3 месяца назад

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.