Off-Canvas Menu Styling

[00:00:00]
>> Jen Kramer: So the next thing we need to do is that main menu that you have right now, that looks so beautiful on desktop, yeah? And when I squash this page down a the moment, it looks like that, okay, so it’s all stacking on top of each other. What we need to do now is we need to get that navigation in a narrow box and we need to push it off the page, right?

[00:00:24]
Because this is going to be an off Canvas kind of thing and we want it to slide back on again. So, let's write some styles that are going to make that happen. And so, this will be our main-menu,
>> Jen Kramer: And the way I'm gonna do this is a position of fixed, okay?

[00:00:47]
Fixed position, display none, okay? So fixed position, it's gonna be in one place on the page. No matter where you scroll on the page, it'll stay in the same place. Display none means we can't see it, right? I'm also going to say on the left it's going to be off the screen by 200 pixels.

[00:01:09]
That's a relative number, you can pick whatever you want. 200 pixels is what happened to work here, okay? You can do something with rems, you could do something with view port etc, etc. But the key is, it must be the same as a number I'm going to show you here in just a moment.

[00:01:25]
The top will be 0, so at the top of the page will have a height of 100%. Remember, that only give you 100% of the content of that area, the written content, right? It doesn't give you 100% of the screen. We need to think about our overflow, so the overflow in the x direction, we're gonna say visible.

[00:01:49]
We'd like people to see, if we have really long navigation names, we'd like people to see them. But the overflow in the y, we're going to make it auto, because we may need a scroll bar yeah, okay?
>> Jen Kramer: And then, one other thing you might often use JavaScript for is your animation.

[00:02:10]
Because when it slides out, you want it to slide out and look pretty. Don't forget we have CSS for that too, yeah? And it may even work better than the JavaScript, cuz it only takes one minor code. Transition is our property, and we can line up a bunch of things for that.

[00:02:26]
So from the left 0.3 seconds, and ease. Ease is the animation type of methodology, whether in terms of how it's going to look as it comes in or out. Some of you might be familiar with that, if you think about dropping a ball I'm holding a ball and I drop it, right?

[00:02:45]
If you watch that ball very carefully, it goes slow and then it speeds up as it hits the ground, remember physics class? [LAUGH] Vaguely, yeah, it speeds up as it hits the ground and then it comes back up and it slows down until it gets to a height, yeah?

[00:03:01]
And then it speeds up again, all right, that's a natural kind of animation. As opposed to what you would see traditionally on a computer, which is things move at one rate, period, right? Anybody who's so, old you played Pong on the original Atari. That's what it looked like, yeah, it went like that.

[00:03:20]
Okay, ease is one of these things it gives you a little bit like start slow and go fast or start fast and then slow down. I think this one is start fast and then slow down. Okay, so that's what that one is and then we'll also give this a z index,

[00:03:38]
>> Jen Kramer: Of 999, because hey, it's a great number.
>> Jen Kramer: So far so good? Any questions on any of this so far?
>> Jen Kramer: Okay, so then we're gonna style up our menu some more. So .main-menu ul, let's go in ahead and say it's going to have a list=style; none.

[00:04:07]
I actually already did this, but I'm gonna repeat myself here. Margin 0, again, in case you guys wanna copy this code later and put it somewhere else. Padding on the top 2.5em, here I'm using ems very deliberately because that's the size space that I want.
>> Jen Kramer: My minimum height is 100%, and the width is 200px.

[00:04:38]
So it's very important here, that's your width of the ul is the same as the width or the left value on your main-menu above, okay? Because that's gonna be part of the sliding this thing onto the screen. So if you want to change that, and you want to make it 300, then it needs to be 300 width here, -300 on the left, make sense?

[00:04:59]
Okay, and then we can give it a color. Background color, lovely shade of black,
>> Jen Kramer: Technically dark gray.
>> Jen Kramer: Okay, so far so good?
>> Speaker 2: I have a question.
>> Jen Kramer: Yeah?
>> Speaker 2: Why do you use a minimum height instead of just height?
>> Jen Kramer: In this particular case, if you wind up being on a phone, right, height could cut some of that off.

[00:05:34]
Minimum height's gonna make it a little bit bigger, yeah. Okay, so then a, display = block. Remember these are going to be links that are stacked on top of each other for a mobile screen that you're gonna be able to touch and click, right? So you wanna make sure that there's enough space for your fat finger, to actually touch these links, correct?

[00:05:59]
Okay, so let's make sure we style them as such. By display = block what's gonna happen? What magically happens to these links, that's a really wonderful thing on phones?
>> Speaker 3: Clickable.
>> Jen Kramer: It's gonna make a whole big area clickable right? as are inline element, only the words are clickable by default.

[00:06:19]
When you turn it into a block, you turn it make a huge area that becomes clickable with an a. So this is a really great thing to do for your links, especially on mobile devices. Okay, padding 0.75 that is going to give us space around those links so that we can click them.

[00:06:37]
Color of white and text decoration of none, no unsightly underlines. And we'll give it a pretty border on the bottom, 1px #383838, another great shade of blackish-gray.
>> Jen Kramer: Okay, so so far, just a lot of pretty stuff.
>> Jen Kramer: Now I gave the borders on the bottom of all those links.

[00:07:10]
Maybe I want one to match on the top too, so I could say .main-menu,
>> Jen Kramer: li first-child,
>> Jen Kramer: a, border-top, 1px #383838.
>> Jen Kramer: So now we have a line on the top, we'll have a line underneath each of these links as we're going down, so far so good?

[00:07:45]
We're almost getting to the end of the pretty stuff, we have two more styles and then we get to the really cool part. Okay, so we're going to say our main,
>> Jen Kramer: -menu a; hover, and main-menu a; focus. Put in styles for those background,
>> Jen Kramer: And a text decoration.

[00:08:28]
>> Jen Kramer: Okay, and then the last style here, I'll be making it pretty packed, is our close button. So .main-menu,
>> Jen Kramer: .menu-close.
>> Jen Kramer: We'll position that absolutely,
>> Jen Kramer: Because we want it right in the top right corner.
>> Jen Kramer: Okay, so that's where x is going to show up.
>> Jen Kramer: Anyone want to take a guess what our web page would look like right now?

[00:09:09]
If I went ahead and just viewed it in a browser with what I've written so far?
>> Speaker 4: There would be no menu.
>> Jen Kramer: There would be no menu, anything else?
>> Speaker 4: It would look very much like the mobile layout.
>> Jen Kramer: It would look very much like a mobile layout, yeah?

[00:09:26]
So if I look at my page so far, that's what I would see, okay? So I have a hamburger button here, I can click it, it does absolutely nothing. [SOUND] Awesome, my nav bar as we spelled out is off-screen, right? And then no way of bringing it on, no