Mobile Navbar Hamburger Menu

[00:00:00]
>> Obviously, we still have a navigation bar here. That's bad. We want the navigation bar to show when we click the hamburger button. So we're going to need to get rid of this navigation. And the way that we do that, super fun. We're gonna say our nav is going to wind up with some funky kinds of dimensions to it.

[00:00:23]
So position of fixed. So when it's fixed on the screen, it pulls it out of the normal flow and it fixes it to the top of the window. If we actually had room to scroll here, that nav bar would stay in place while we scrolled up and down the web page.

[00:00:40]
You've seen webpages do that before. So that's what the fixed does. Then we're gonna tell it where to go. Top is 0, in other words, go all the way to the top, right, 200%, that's gonna shove it off screen. Makes sense, 200% is somewhere way off there in the distance out of the browser window, so that's what right: 200% does.

[00:01:10]
The width, we want to be100 vw, anybody know what a vw is? It is not a Volkswagen.
>> View width.
>> Viewport width, right? Viewport width, so, 100 viewport widths would be what? As wide as the window, okay? As wide as the window, awesome. And the height will be 100 vh.

[00:01:41]
Guess what vh stands for?
>> I think viewport height.
>> Viewport height. So it's gonna stretch the whole way down the screen. So when we see it, these are all the things that we're going to see. The background is fff. We're gonna put some padding on the top of about 20%.

[00:02:05]
And then we're gonna add this transition. Boy, we got a lot of stuff going on in here, right? 0 seconds, 0.5 seconds opacity 0.5 seconds. And I'm just gonna leave that line right now. I will explain that to you momentarily. But the transition is the way that we're gonna make a little animation happen so that when we click the hamburger button, the menu flies in.

[00:02:30]
That's the magic that's happening there, and I'll explain that line to you in more detail momentarily. So now we're gonna say button:focus + nav, button:focus-within + nav. Okay, so that's a really funky looking selector. So remember anything that's separated by commas, those are two separate selectors, okay? What is focus and what is focus within?

[00:03:08]
Does anybody know what focus and focus within are?
>> Maybe it automatically selects it for you.
>> Yeah, it has to do with that. So if I'm looking at my webpage here, let me go up to the top here. And I start hitting my tab key on the computer.

[00:03:29]
Do you see how the little green box there is sorta jumping around a little bit and it's showing me what's clickable, okay? That is focus, the focus is what is responsible for those lines. And of course, focus within is what's inside of that particular item in focus. Yeah, all right.

[00:03:51]
So when we have the plus sign here, we're talking about siblings. And what we have here is we have a button followed by a navigation, okay, button, followed by a navigation. So that is the pattern that we're looking for here. So when a button in focus is followed by navigation or, oops, within, a button with a focus within is followed by navigation, we are going to do these things, this is gonna make disappear.

[00:04:22]
So right will become 0, it was 200%. It's gonna become 0. So it's gonna come on to the screen. We're gonna change its opacity to 1, that will make it so you can see it. And transition: right 0s, opacity 0.5 seconds. So let me just click this and you can kinda see what's going on now.

[00:04:54]
Look at that, okay? So what's happening here? When we click the button now, our menu is flying in, it's white, it's fully opaque so we can see it, and it's coming in from the right side and it's coming into view. Does that make sense? That's kinda what that code that we just wrote said.

[00:05:19]
The only thing you see on here is the Resume button. Why is that?
>> The text is white.
>> White text on a white background, exactly. I don't know if I can select that or not. Let me try again. There it is. So you see it's there, okay?

[00:05:35]
But it's white text on a white background, and currently it's horizontal on the page. Okay, plus we have no x, so we have some other things we need to add. All right, so let's make that navigation bar then, right now is horizontal on the page. Let's make it go vertical and let's give it some color, I think.

[00:06:03]
So now have you well, we're gonna say display: block. We're gonna say text-align: center; position: relative; top: -50vh; transition: top 0.5 seconds. So all of that is for our navigation bar, for all of those links inside of our navigation bar, we are going to have that do a separate little animation.

[00:06:38]
So just to demonstrate that for you. When I'm on our final site here and I click my hamburger button, see that the white flies in and then see that the menu flies in as well? Cool, that's what we're coding right now, Okay. And then we have to do a little bit more here, button:focus + nav ul.

[00:07:16]
This again has to do with the animation. Then + nav ul, top: 0. So this is bringing it in from completely hidden away at -50vh. So off the page, this is bringing it in so that we can see it, okay? So in theory, we can see it, although I can't see it right now.

[00:07:47]
Let's have faith that it will come into view.
>> Maybe you want to focus-within again.
>> I forgot that, yeah. Thank you, focus-within, there we go. It's there. One button, it looks like one button, but it's there. There we go, okay. So now we just need to style it so we can see it.

[00:08:11]
All right, so to get that done, we're gonna say nav a: any-link. any-link means any kinda links that are there, whether they have been visited or not visited. We wanna style those. So we're going to say display: block, and padding: 1.5 rems, to give them the little space, and color: var(--green).

[00:08:46]
And to keep the space even between navigation items, for the button itself, nav, this is the .button, in other words, the resume button, margin-top: 1.5 rem. So now when we click that, hey, look, we can finally see at least the links, yeah. We're getting there. Okay. Now we're gonna add a close icon.

[00:09:18]
So to add the close icon, we're gonna say nav ul::after, and we're gonna use that same content trick with like a Unicode. So content would be " \2716". You guys Google for like /2716 and whatever, CSS or something like that, you'll find these charts of Unicode characters. And you will find things like hamburger buttons and you'll find axes and all the rest of it.

[00:09:53]
What's nice about using these here in the context of CSS in the realm, before and after, is that these come in right straight off of your font. We don't have to load up a separate SVG, which can be a lot to try to include your SVGs inside of CSS.

[00:10:13]
So this is a little bit simpler way of doing it. We'll make it var(--green). We'll make it display: block; position: absolute. So this is how we're gonna position this in space. By absolute positioning, we can set it exactly in the upper right-hand corner where we want it, and top: 0.125rem; right: 0.5rem.

[00:10:50]
That will dictate exactly where that x is going to appear. We'll make it big. font-size: 3rems; line-height: 1. So there it is, there's our x. Before we had the x, you can actually click anywhere in here, so if I I click over in a white area or something, that will close the page.

[00:11:18]
But by putting in this x here, so it looks like there's something to click, that gives people a little bit of extra security that there is a way that I can close this thing. They don't feel completely lost, okay? Yeah, and I skipped the part about the SVGs.

[00:11:34]
That's why they're still white. So let's get that in place. nav a svg{ } The fill color will be var(--green), And nav a:hover, nav a svg:hover{ color: var(--tan)}. So if this is just a regular old link, it's gonna be tan. And if it is an SVG, it will have a fill of tan.

[00:12:19]
Whew, okay, There we go. Okay, so our button still has a few issues here. We can fix that, okay. So we're gonna go here to nav.button. Scroll up just a little bit from where you were. We're gonna go to nav.button, and we're going to say that this is going to be display: inline-block, and we're gonna say the color will be var(--black).

[00:13:01]
The last thing we have to figure out here is why the button is going all the way across the screen here. It looks like it was working when we roll our mouse over it, you see that it is tan and we can see the word resume. When the button is here by itself, it's green.

[00:13:18]
The words are also green, that is why it looks like it's an unlabeled button and it's stretching all the way across the windows. So it's behaving more like a block button than it is a regular button that would be inline block or inline like we had it set up before, and the issue is actually here.

[00:13:35]
So when we go to nav a:any-link, guess what, our button is any-link. Yeah, it is coded just like link. So it's doing exactly what we told it to do, and I really hate it when that happens. So it is displaying as a block, there it is stretching all the way across the screen.

[00:13:57]
It is got some padding on it, one and a half rems, and the text color is green. There it is. It's exactly doing exactly what I told it to do. So in order to make this, what I really wanna say is, for any link in the navigation, except for the button, do this.

[00:14:14]
And there actually is a way to write that, and the way it looks is this. nav a: any-link:not(.button). That one is a mouthful, okay? For those of you who are a little bit more advanced, this is a really cool way of dealing with this. So for any link that's there in the navigation that does not have a class of button, apply these styles.

[00:14:39]
But if it does have a class of button, do not apply these styles. And when you open up the window, sure enough, the button did not have that style applied. Okay, how are people feeling at this point? That was a huge mouthful. It's really oriented towards some of you that have more experience working with HTML and CSS, trying to put in a hamburger button like this.

[00:15:05]
If we had taken some other approaches, we could have worked with a hamburger button in JavaScript that would introduce a whole nother can of worms, so to speak. But to get it to work in CSS, this is one way of doing it. If you are a more junior developer and you found that this was kinda confusing and a lot, believe me, I feel your pain.

[00:15:25]
[LAUGH] It's an awful lot to digest for this hamburger button. So what you may wanna do is just do the two parts that were relatively straightforward, which is, design your navigation bar like this to go all the way across the screen. That was relatively straightforward and should be straightforward enough to deal with, and then for smaller screens, maybe you just go like this, and we call it good.

[00:15:53]
And when the screens get even smaller, maybe you would want to do something like make your name smaller, maybe make two rows of buttons for the navigation and make them horizontal on the page. That would be another way to go. So there's a lot of ways that you can make this easier if putting in the hamburger button felt like a really big left and a little bit too much to do.

[00:16:13]
Make sense? So it's kinda like gym class, right? We have the easy ones for people who are brand new to this and then we have the more difficult things for people who've been around for a while. Any questions on this so far, yes.
>> So regarding the last two lines there starting at 236, it looks like both media lines are going to apply.

[00:16:46]
>> Yes.
>> Right, because both things are true.
>> Correct.
>> Okay, are you able to use max and minimum width to kind of say, okay, only do something if it's between this and this?
>> Yes, you can. So if you if you wanted to have a range, you could say something like min-width, I don't know, width, if you can spell it width.

[00:17:09]
Let's say 500px, and max-width of 830. So that would give you a very narrow range if that's what you wanted to do. That is a possibility with a media query. Generally speaking, the way we look at these in web development right now is all these styles that are here are outside the media query.

[00:17:33]
So they apply by default. So all those styles apply by default. Then we say, if it's no more than 830px, then these styles apply. And if it's no more than 640px, these styles apply. But remember that things are overridden along the way. So even though here, whatever, we've said that links are green and the background is white.

[00:18:03]
We overrode those as we go further up here in our CSS.