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

[@dandelionwitch]

Making some *TIMESTAMPS* and notes for myself because the video’s so packed with fast-paced info! Thanks for the awesome video, Coder Coder! *BASIC HTML MARKUP AND CSS STYLING* 0:50 HTML markup for header and nav begins 1:06 *styling desktop header* flexbox, removing list stylings 1:28 HTML markup for mobile hamburger menu begins 1:38 *styling mobile menu using media queries and flexbox* 2:06 *close button HTML markup* ; explanation of accessibility & button elements 2:27 *close button styling* : removing default button styles, close button placement, click target size 2:49 *demo* of what the hamburger menu looks like when open; *setting initial closed position of menu* using translate and transition to place menu off screen 3:07 *open button HTML markup* ; hiding open and close buttons for devices larger than mobile using media queries and display: none *BASIC MENU STYLING FINISHED FOR DESKTOP AND FOR CLOSED MENU ON MOBILE* *USING ARIA DIALOGUES FOR EXPANDABLE FUNCTIONALITY* 3:24 explanation of how this menu implementation efficiently *makes use of functional accessibility attributes as targets for styling* (ie., in addition to class/id selectors, this method leverages the same markup to provide menu functionality for users regardless of whether or not they’re using accessibility-specific tech for web browsing) 3:41 using ARIA *role=“dialogue”* & other examples of interactive dialogues in web development 4:00 setting *aria-expanded: false* state to control initial dialogue open/close state 4:23 providing context for the menu for screen reader users by using *hidden span* and *aria-labelledby=“”* (is this span in the right place? confused lol) 4:44 *setting open position of menu* by targeting the open button’s *aria-expanded=“true”* state (explains that this works because when the menu is open, *topnav__menu div element* is the next sibling element of *topnav__open button* element; I don’t tooootally think I’m understanding this right lol); setting translate and transition so that *topnav__menu div* element *comes back on screen* when *topnav__open button* is clicked 5:06 explanation of how *Javascript* will be used to *change aria-expanded state*

[@dandelionwitch]

*JAVASCRIPT COMPONENTS* *OPEN BUTTON FUNCTIONALITY* 5:15 adding an ID to open button element HTML so it can be targeted in javascript file; setting up *script.js* file; loading open button ID as a *constant* 5:24 creating *openMobileMenu function* for opening the mobile menu by changing the *aria-expanded=“”* value from *False* to *True* ; setting *.addEventListener* to run the function when the open button is clicked 5:40 demo of *aria-expanded state* changing *CLOSE BUTTON FUNCTIONALITY* 5:50 adding ID and *aria-label* to *topnav__close button* in HTML; explains to use *aria-label* to label JUST that element (rather than using *aria-labelledby* which is for groupings of functionality?) 6:06 creating JS *closeMobileMenu function* for changing *aria-expanded* from *True* to *False* ; setting *.addEventListener* for close button 6:33 demo of open and close menu button functionality *COMPLETING FUNCTIONALITY* - note that other commenters found a bug in the code where the inert attribute was being set in desktop because of the load order of some instructions; order has been fixed by Coder Coder in GitHub repo. Move the *topNavMenu.removeAttribute(“inert”)* line AFTER the *closeMobileMenu() function* to avoid having nav items be inactive and untargetable on desktop menu. 6:45 explaining how *inert* HTML attribute works to hide and show topnav menu for *keyboard and screenreader users* ( *inert* is set when the menu is *closed* on mobile to hide it from accessibility tools so that the nav item names and links aren’t constantly available to be read out/selected while page content is being accessed; this provides the equivalent functionality of /visually/ hiding the menu for sighted users using traditional navigation) 7:03 Coder Coder talk about learning from awesome *Practical Accessibility course by Sara Soueidan* 7:28 explaining the *purpose* of the planned JS *function* ( *setupTopNav function* starts off just being for changing *inert attribute* , ~functionality for switching between mobile and desktop menu variants is expanded upon later in the video~ actually I may be misunderstanding this, revise later) *SETTING UP FOR INERT ATTRIBUTE FUNCTIONALITY* 7:38 creating *constant* with *window.matchMedia method* 7:48 creating *setupTopNav function* that will accept the *boolean value result of the media match constant* as a *parameter* 7:53 setting up a *decision* with *if/else conditions* that check for *device width* ; conditional instruction statements print “is mobile” or “is desktop” to console log 8:08 *calling setupTopNav function on page load* so that device width is checked when the page first loads *ADD/REMOVE INERT ATTRIBUTE FOR MOBILE+DESKTOP MENUS* 8:12 creating *const topNavMenu* to use the *document.querySelector method* to access the *.topnav__menu* selector in the HTML markup 8:15 adding *statements* to the *conditions* in *setupTopNav function* ; statements *add inert attribute* to *div.topnav__menu* HTML element on *mobile* and *removes inert attribute* on *desktop* (both are included so that the *inert attribute* will also be *turned off* to return the menu to the proper desktop display in case user switches from a mobile viewport width to a wider one) 8:38 *calling setupTopNav function* when the viewport width *changes* by using the *.addEventListener method* on *media constant* 9:06 adding inert attribute switching to *openMobileMenu and closeMobileMenu functions* using *.removeAttribute and .setAttribute methods* 9:12 demo of inert attribute switching functionality *INERT ATTRIBUTE FUNCTIONALITY COMPLETE*

[@TheCoderCoder]

Thank you for doing this!

[@dandelionwitch]

@@TheCoderCoder hell yeah, you bet! Going through the information like this is really helping me to understand what’s happening, so I wanted to share in case my notes could help anyone else too! Thanks so much for providing this awesome information, your content is so helpful!

[@dandelionwitch]

*IMPROVING APPEARANCE OF MENU TRANSITION BETWEEN MOBILE AND DESKTOP VIEWPORT WIDTHS* 9:25 *demo* : because of the transition time property, the animation for showing/hiding the mobile menu runs when switching between mobile and desktop viewport widths -timestamps to be continued later-

[@buildervision7082]

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]

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

[@CoderAndDeveloperthings]

kzbin.infognXhaF9UTVs?feature=share

[@PicSta]

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.

[@TheCoderCoder]

glad you found this helpful, and thanks for watching!

[@monzerfaisal3673]

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

[@johnsonb8727]

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

[@RossMarshall-x7w]

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

[@tristangibbs8488]

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

[@TheCoderCoder]

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

[@dashingpix]

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

[@waltersumofan]

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

[@TheCoderCoder]

Thanks so much!

[@kamrankiani7328]

Hi. Thanks for this useful video. Very Nice and Clean. For hiding the scroll on y axis I have a suggestion with :has too. You can use this simply on your body: body:has(.nav--open[aria-expanded="true"]) { overflow-y: hidden; }

[@VinayKumar-cm2nn]

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

[@ifeanyinnaemego]

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

[@Ebishenmansfield]

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]

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

[@MarshallSC1]

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]

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]

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

[@CoderAndDeveloperthings]

kzbin.infognXhaF9UTVs?feature=share

[@Judithlobo-wp3zf]

@@TheCoderCoder can you please do a react course

[@manuelsanchezweb]

Extremely good content! Thank you so much!

[@mr-smartchoice]

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]

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

[@lvekua]

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

[@TheCoderCoder]

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

[@onetwothree123-]

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

[@ebrarulhaquehamim5794]

why aren't you posting anymore? your editing skills and way of explaning is way too good

[@Tony.Nguyen137]

How is the nav not causing horizontal scroll bar when off screen, you don’t even use overflow:hidden.

[@SnakesRaven]

Thank you for a thorough and clear explanation.

[@baz9862]

could you not use 'aria-hidden' rather than inert to hide the content?

[@sul-dev]

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

[@TheCoderCoder]

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

[@ИвайлоТрепетанов]

what do you use for that html css code intelisence

[@khalil_art]

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]

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]

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

[@godswillumukoro8908]

You’re the best!!

[@Tony.Nguyen137]

More accessible components like this pls

[@AlThePal78]

what a great video :)

[@cubespeed100]

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

[@TheCoderCoder]

Oh hello!! And thank you for watching!

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

[@nielslytzdk]

Very nice tutorial 👍. I went down the rabbit hole and tried to build it as an Astro component.. It did NOT go well 😂 .

[@mukesh-mahato]

How did you know i was looking for this ?😅

[@Thefirstplayer-Tm]

Like seriously me too, thanks

[@TheCoderCoder]

Glad this could help!!

[@godfredacquah-h8z]

New Subscriber 😮

[@greateagle8799]

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?

[@greateagle8799]

you're welcome buckos

[@greateagle8799]

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

[@Mateus.95.]

@@greateagle8799 Had the same issue, turns out you use + to select the next adjacent tag and ~ when it's in the same container, like a brother if that makes sense... Mine wasn't even in the same container... did some research and created a 'is-open' class on CSS to use transform: translateX(0);.

[@gdeveloper3]

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

[@TheCoderCoder]

That sounds good!

[@moazahmed1481]

PLEASE someone tell me the microphone she is using, it’s GORGEOUS 😻

[@TheCoderCoder]

It's an Electro-Voice RE320!

[@InoriDokusha]

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. 🙂🙏

[@harpo187bling]

Nice to see you

[@opencode1]

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

[@Youssef-pk2hw]

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

[@TheCoderCoder]

Thanks for watching! what flag do you mean?

[@BugraBasbostanci]

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

[@TheCoderCoder]

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

[@Khoaang-pk1et]

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 🤓

[@JohnWickXD]

Damn the video quality is unbeatable!

[@TheCoderCoder]

Thanks so much!!

[@shashank8575]

video speed is pretty high couldn't understand properly

[@NilsuGungor-t7b]

Change the playback speed

[@rootcodinggood]

thank video

[@evandromatt]

Nice video, but why didn't you use 'mobile first'?

[@jonisarowar8424]

make it tailwind css

[@ziddilarka-w8k]

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

[@Def_not_Haru]

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

[@kannandb7473]

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

[@sr-studio]

cuteJavaScript ❤

[@dhananjaythakur5190]

Where are you from

[@alisanan9090]

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

[@CoderAndDeveloperthings]

kzbin.infognXhaF9UTVs?feature=share

[@Marieshengelia]

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

[@NastenkaVasileva]

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

[@seaviasfo]

I call them san menu's because they look like 三 🤣 but mostly because i'm vegan 🥑

[@MohamedAhmad4085]

your speed is to fast please slow

[@godfredacquah-h8z]

I turn playback speed to .5 but still

[@joeokat]

Decrease the playback speed and enjoy 🎉

[@sergiowinchester1233]

vc e foda

[@illegaldream]

This isn't a beginner friendly channel for web development

[@mochamadrasyad338]

Why?

[@illegaldream]

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

[@taiwolukman2499]

I think so

[@b0nes2704]

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__]

Cry me a river

[@bobasquid3339]

I prefer turkey burgers 🍔

[@Dom-zy1qy]

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

[@nested9301]

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

[@sul-dev]

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.

[@adenugbamicheal2140]

Useless to create something from?! Please tell me its a joke.

[@CoderAndDeveloperthings]

kzbin.infognXhaF9UTVs?feature=share

[@ziddilarka-w8k]

please give right and short class name topnav_link topnav_links is this make any sense very bad

[@onetwothree123-]

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