Adding a Hamburger Menu

[00:00:00]
>> Kevin Powell: All right, so one of the things we wanna do with this project is improve upon our mobile navigation. I'm still a fan of these very simple ones that just work when we go into them. So if you have an intrinsic one like this that I'll be a fan of it.

[00:00:15]
But a lot of the time the design you get will have a hamburger menu in it. So we need to do a little bit of work to actually make that into an actual thing. And so at this stage to do this, because it's a pretty big feature that we're gonna be implementing, I would actually suggest in our source control creating a new branch instead of just working directly from the files we have now.

[00:00:33]
It does mean, if you blow things up, it's actually easy just to revert back to where you were. And it's also a really common way to work in. When you're doing an actual job, you're given this one feature to work on, you'll make a branch from the main project.

[00:00:46]
You sort of work on that one feature, and then when it's finished, you pull it back into the main project. So it's exactly what we're gonna look at how to do. Since we're doing it all just with the VS code options we have here, there's a couple of different ways you can create a branch.

[00:00:59]
One of them is going just in the menu, in the source control here, branch, and you can do a create branch. Another way you can do it is all the way at the bottom, there's a little button that says main on it, and you can click on that and you get this new option that comes up.

[00:01:13]
Or you can do a CTRL+SHIFT+P and just write branch, and you'll see a get create branch pops up. All of them are giving you the same options. One thing that's important is you get a new branch or a new branch from. In this case, we just want a new branch.

[00:01:28]
We're working off of Main. If you had a whole bunch of different branches going on, you might wanna pinpoint a specific one. In this specific case, we don't have any sub branches or anything to worry about, nothing too complicated. So we can just do create new branch, and it's gonna ask you for what the name is.

[00:01:41]
I'm just gonna write hamburger menu. We wanna say what what we're building, that's what it is. And then you get a nice big publish branch button. So we can click on that, and we now are working on a new branch. One thing VS code doesn't make super obvious is what branch you're working on.

[00:01:59]
So you do wanna pay attention down here at the bottom. As you can see it says hamburger-menu. And if I click on it, now there's those two branches that are there, my hamburger-menu and the main. So you just wanna pay attention, don't forget, you've made a new branch along the way.

[00:02:12]
So we're gonna focus on this branch, finish the work we're doing on it, then go back to the main once everything is done here. So now that we're in our new branch, we wanna start updating our navigation. The first thing we need to think about is what we have now, which is just something that looks similar to what we have here.

[00:02:27]
This is a simplified version. We have a wrapper, the site inner and all of that, but these are the main pieces we have in there, which we have the logo, we have our primary navigation. And we're going to need something that is able to change that. We need a button to activate and we need to be able to hide our navigation and all of those things.

[00:02:45]
So to do that, the first thing I'm gonna suggest is we can come here, get out of our source control, go back into our index, and go find that navigation, right there. So in between my nav that I have here and, yeah, right before my primary navigation. So in between the image and the nav, I'm gonna come in with a button.

[00:03:11]
The thing with the button is I've given you an image. So the image is the assets and the hamburger, and we could save that, we can go take a look. We have a button, can't really see it too well right now because it's a white hamburger, but we have the button that's there.

[00:03:28]
Once again though, I do wanna just mention that some people are gonna be using assistive technologies or other things, and if they come across this, they don't really know what it is. They have a button and they have no context to what this button is. It will say button to them, the screen reader will tell them they're on a button.

[00:03:43]
They'll say there's an image in here, but it doesn't really do much. You could give some context through the alt. What I see a lot of people do here is hamburger or hamburger-menu. That also doesn't really give much context. Imagine something's reading to you, and it says button hamburger, image of hamburger, or image hamburger, you're gonna think it's actually a hamburger.

[00:04:05]
It's kind of useless. So I would actually suggest leaving this alt blank, so we're saying that it's just a decorative piece of text, or, sorry, a decorative image. And in that button, we could come in and do our span with a class of visually hidden, which we've already used before, and in there we can just write menu.

[00:04:31]
>> Kevin Powell: So if an assistive technology comes along or if the hamburger menu fails to load your CSS fails to load, your JavaScript probably won't be working then either. So you have bigger problems, but we have some context that's coming in there. So if I take that class off, you can see the word menus there.

[00:04:47]
So it's just this hidden little piece of text, again, to give extra context to what that button is actually doing. And it's very easy to put that in there. The other thing that we wanna do is actually add some context to what this purpose of this button is.

[00:04:59]
Cuz right now, if they come across this button, they know it's a menu, but there's no connection to anything whatsoever right now. We can connect this with JavaScript, we're gonna have to do that anyway, but on this button, we can also add an area controls. And on there, we can say that this controls our primary-nav, I'm gonna do it shorter than primary navigation, and to be able to make that connection, then I do need to come on the nav and write ID is equal to primary.

[00:05:34]
>> Kevin Powell: Nav. So now, from an accessibility point of view, we've connected button to the navigation. There's one more missing piece of context, though, is by default, this is going to be a closed menu, and then we're gonna be clicking and it's gonna be opening and clicking and it's gonna be closing.

[00:05:51]
And we wannna be able to pass that information through as well, because if somebody's keyboard navigating or using an assistive technology to read the site to them and they get to the menu. If it tells them that it's open or closed is a really important piece of information cuz then they know if they hit if it tells them it's closed, they know if they hit tab again, it's gonna go somewhere else.

[00:06:11]
Whereas if it's open, they know it's going to bring them inside the navigation and they're gonna be able to access the links that are in there. So a very easy thing to add while we're in here. Sorry, on our button, we have the area controls primary-nav, and we're gonna do an area expanded is equal to false, because by default the navigation will be closed at smaller screens.

[00:06:34]
So I'm just gonna put that on multiple lines. Prettier might not like that. A lot of the time when we're doing accessibility things, the best way to have good accessibility is just using the correct semantic code along the way. So using your headings properly, using your main, footer, nav, all of these different types of things.

[00:06:51]
When it comes to interactive elements, a lot of the time there are these extra steps that you do wanna be able to take to or you will have to take just to make it accessible when those interactions are actually happening. Cuz just having the visual change on the screen isn't always enough.

[00:07:09]
It's not always easy to find this information. But if you just look up a11y, which is the short term for accessibility, and then put in the component you're building, if it's tabs, if it's a navigation menu, if it's a carousel and you search for that just a11y put in the thing you're building.

[00:07:26]
You'll get a lot of guides that are giving you best practices on how to build those and the types of things you'll have to look out for with area. Cuz generally no area is the best area, but with interaction and other things like that, you'll often have to add a little bit in there.