Vertical Navigation Bar Styling

[00:00:00]
>> Jen Kramer: Okay, so let's go ahead and move on to my next example which has to do with navigation bars. And this is one of my favorite things to do when talking about the box model because we got a lot of boxes going on in navigation bars. So if you scroll through your notes, there we, go styling nav bars in a horizontal and vertical direction, so that's about three-quarters of the way down the page.

[00:00:22]
And we'll start with vertical navigation bars, so go on ahead and open up the code pen for that.
>> Jen Kramer: So we're gonna start on vertical navigation bars. Anyone wanna make a comment on the HTML that we're starting with?
>> Jen Kramer: Yeah?
>> Speaker 2: They all go to the same place.

[00:00:57]
>> Jen Kramer: They all go to the same place, that is true, it is not much of a navigation bar. [LAUGH] They all go absolutely nowhere. They're just links that go nowhere. Yeah, what else?
>> Speaker 3: Vertically aligned instead of horizontally?
>> Jen Kramer: These are vertical to start with because these are the default browser styling.

[00:01:16]
And we've marked up our navigation bar using a what?
>> Speaker 3: A nav tag.
>> Jen Kramer: We have a nav tag but also what?
>> Speaker 3: Unordered list.
>> Jen Kramer: An unordered list. Why do we use an unordered list for a navigation bar?
>> Jen Kramer: Yeah?
>> Speaker 2: It doesn't matter?
>> Jen Kramer: It is a list of links, isn't it?

[00:01:34]
In the end, the navigation bar's just a list of links. And it really doesn't matter what order we put those links in, although marketing will tell you differently, right? It doesn't matter what order those links go in because nobody is necessarily, you don't have to visit the home first, and then go to products, and then go to services, and you better not go out of order, right?

[00:01:56]
You can go to any of those pages at anytime. So an unordered list is the right way to mark it up. Surrounding that we have the nav tag. See the nav tag up there on the top? Okay. And so nav stands for?
>> Speaker 2: Navigation.
>> Jen Kramer: Navigation. Okay, so your navigation bar on your web page you're gonna mark off with the nav tag.

[00:02:19]
And that's gonna help you differentiate this particular list from other lists on your web page, isn't it? Using your friend, the descendant selector. Okay, yes?
>> Speaker 2: If you're were gonna use header-
>> Jen Kramer: Mm-hm.
>> Speaker 2: Would your nav go in the header or-
>> Jen Kramer: It can-
>> Speaker 2: After it?

[00:02:34]
>> Jen Kramer: Or it can go after it.
>> Speaker 2: Okay, so it's either or?
>> Jen Kramer: It depends, yep. All right, good. So this is the way our navigation bar looks right now. Anybody wanna just a way that we could start to improve how this navigation bar looks? Yeah?
>> Speaker 2: Give it a font.

[00:02:51]
>> Jen Kramer: Let's give it a font. [LAUGH] Always a good choice. So let's start with the body tag, let's give it a font.
>> Jen Kramer: Okay.
>> Jen Kramer: So much better, are we done? No? Okay. What else should we do here?
>> Speaker 2: Get rid of the bullets.
>> Jen Kramer: Let's get rid of those bullets, those unsightly bullets.

[00:03:28]
Okay, so we should get rid of those bullets. Where are the bullets coming from?
>> Speaker 3: Unordered list.
>> Jen Kramer: They're coming from the unordered list. So we can say nav ul. So the reason I'm putting nav in front of my ul is because I want the unordered list inside of the navigation, right?

[00:03:49]
I know this web page only has a navigation bar on it, but chances are if you code a navigation bar in the future there are other things on your web page, yeah? Okay. So, nav ul, and the way we're gonna turn off the bullets is this, list-style-type: none, okay, list-style-type: none,

[00:04:15]
>> Jen Kramer: And that will turn off the bullets, yay.
>> Jen Kramer: Something else you wanna do?
>> Jen Kramer: Bullets went away, anything else?
>> Jen Kramer: Yeah?
>> Speaker 2: Get rid of the underlining.
>> Jen Kramer: Get rid of the underlining, but before we go there let me just put in a style for nav Border: 1 px solid.

[00:04:44]
I always have to make them fatter so you can see them on the screen, 3 px solid red.
>> Jen Kramer: Okay? Is that where we want the nav bar? You see how it's kind of indented off the page a little bit?
>> [INAUDIBLE]
>> Jen Kramer: Are you happy with that?

[00:05:03]
>> Speaker 3: When it's vertical, it doesn't make any sense, right? It's wasting all your space.
>> Jen Kramer: Yeah.
>> Speaker 3: To the right of it.
>> Jen Kramer: Yeah, so are you saying you wanna get rid of that space? Would shove everything on over to the left. So how might we do that?

[00:05:17]
What style do we need, and what do we need to change?
>> Jen Kramer: And what happens if we have no idea?
>> Speaker 2: Google it?
>> Jen Kramer: You could Google it but you could also figure this out, right? Let's put on a Border of 3 px dotted blue around my ul.

[00:05:40]
Does that help tell you the answer?
>> Jen Kramer: If it doesn't, you can keep adding borders. Okay, nav li border: 3px dashed green.
>> Jen Kramer: So what we got going on here, everybody? So we've got some boxes in boxes right? I've gone ahead and put borders around my boxes. So I have a nav box, that's the red one on the outside, then I have a blue dotted box, that's my ul.

[00:06:18]
See how nicely that blue dotted box fits inside? And it goes all the way up to the edge right? Right inside of that nav. And then we have our lis. And our lis what does that tell you? The lis start at the words and there's a gap in between.

[00:06:37]
So what's going on here?
>> Speaker 3: You need to get rid of the margin the left of li is that what it this?
>> Jen Kramer: There's a margin on the li, what's the other possibility?
>> Speaker 3: Padding on the ul.
>> Jen Kramer: Padding on the ul. There's either padding on the ul or margin on the li.

[00:06:55]
Does that make sense to people?
>> Jen Kramer: Need to give you a minute to digest that. Yes, Jenna?
>> Speaker 2: I just I'm just wondering, in the CSS-
>> Jen Kramer: Mm-hm.
>> Speaker 2: I would think to do it what you just did you would've had to do nav ul li to get specific.

[00:07:17]
>> Jen Kramer: Mm-hm.
>> Speaker 2: But you don't, that's-
>> Jen Kramer: It depends. It depends. It depends on what ils you are trying to do. But this descended selector says nav li, all that is saying is for all lis descended from nav.
>> Speaker 2: Okay.
>> Jen Kramer: And these lis are definitely descended from nav aren't they?

[00:07:35]
Now we could also say nav ul li there's nothing wrong with that.
>> Speaker 2: I know it worked the same though.
>> Jen Kramer: It worked exactly the same.
>> Speaker 2: Okay.
>> Jen Kramer: Because that still lines up with what we've got here. But this is three characters less in terms of typing.

[00:07:51]
>> Jen Kramer: Okay, all right, so let's try turning off either the padding or the margin, right? So we can always say padding 0 here on my ul.
>> [SOUND]
>> Jen Kramer: Now I happen to know historically that this ul sometimes it's been margin in some browsers, it's been padding in other browsers.

[00:08:11]
So it's probably a healthy thing just to throw this in too,
>> Jen Kramer: Okay, so we've just set our padding and our margin to 0.
>> Jen Kramer: So now everything all lines up with our big box. See how that works? Okay, so what I'm gonna do now, is I'm just gonna go ahead and set my borders to 0.

[00:08:41]
So 0 pixels wide, in other words, they won't show up on the web page but I still have them, so I don't have to re-type all of that later if I'm debugging something. But I can still see what I'm doing, [LAUGH] okay? We can get rid of that code later but we may need to refer it again for debugging purposes.