FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Navigation Lists

[SOUND]. Welcome back, today we are going to be focusing on navigation. How would you create a navigation list for your website? And this is something that every website shares in common. So of course it's really important that you learn how to do this and it's really easy. Let's take a look at an example first. If we take a look at net tuts, you can see right here we have a list of navigation links. Now what these do is they allow us to sort the postings on the website, according to category and tags. So, let's learn how we can do this on our own fictional website. I'm gonna open up my code editor. And of course we have a blank style sheet and a skeleton HTML file, which links to the style sheet. This all should be very familiar to you at this point. Now, I gave you a hint and I noted that we need to create a list of navigation links. And when I use that keyword, when you can describe content as a list, then you should be using an unordered list. Now, within this list, we should have a list item containing an anchor tag, which links to the desired page. I'll create that now, and we'll have a href, and we'll set the value to a pound sign, because we don't have an actual website in this case. So we'll link simply to pound which means nothing. And we'll call it, Home, and I will close out my anchor tag. Next, I will duplicate this a few times and we'll have our various pages. So, we could have an about page, perhaps a portfolio page and then lastly maybe contact, this is fairly common. So let's see how this alone looks in the browser. And this is probably what you would expect, we have a nice list containing anchor tags, each one will take us to the desired page. But now, you might be thinking, well, Jeff, that doesn't look anything like the inline list of links on NetTouch. Okay, that's okay because, remember, the visuals, how it's displayed on the page has nothing to do with the markup. Our goal with the markup is to use semantic elements that describe what the content is. It has nothing to do with the visuals because we can always override that with our stylesheet. So let's do that now. First, I will change the display. By default, list items have a display of list item, what they would call list item. But in this case, we want them to display in a line, or inline. So let's adjust it to inline and see what we get with that alone. If I refresh, sure enough, we've gotten rid of the bullet because its no longer set to a list item display and now they're displaying in a line. Now the way this works is they will display in a line as long as possible until the width of all of the links combined add up to more than the width of their container. To give you an example, watch what happens if we set their container, an unordered list, and we get them a width of 150 pixels. If I reload the page you can see once it got the contact, the width would have been too much so it, they are bound to that 150 pixels, in which case it needs to drop to a new line. I'm gonna remove this and our next step is, we probably don't want these underlines there, that kinda looks tacky. All right, with CSS this is easy. We're gonna grab the anchor tags, and note I'm being very general here. This is referring to all anchor tags in your entire website. If you want to limit it to only the anchor tags that are perhaps within an unordered list, you might want to do something like this, or you could also do this. Next, we're gonna set text-decoration to none, meaning we don't want any underline or anything like that. If I reload the page, now those are gone. The next step is, why don't we use a nice font. So rather than using Times, we'll apply a font family, and you've learned about this, of sans serif, and this will use the most appropriate font of that type. And on your computer, that will likely be Helvetica or Arial. Okay that looks a little bit better. But now you might be thinking, well, it could use a little more spacing. Between each item. That's easy too. We'll say with the list item, give it some padding-right for each one and we'll say 10 pixels worth. And now if I reload, pay attention, you have just a little bit more room as you can see right there. So the next thing you might be thinking is well when I hover over this, other than the fact that the cursor changes to a pointer, it's not easy to tell that these are clickable links. So why don't we provide a little bit more visual feedback and we will apply the underline again when you hover over the anchor tag, and we do that by using a pseudo-class. So watch what happens when I do, a:hover. This is a pseudo-class, meaning when you hover over the element it is attached to, in this case an anchor tag. And in this case we'll see text decoration, and we're gonna add that back on, I'll save it and reload the page. And now, when I hover over it, sure enough we now have underlines. Good. So what you can see here is, it's really very easy to style a navigation list however you want. If you wanna change the font size for some crazy reason, maybe we'll say 30px, this is gonna look awful, but it's to note that you can apply any styling you want. So you can like, create these little miniature animations, as you can see right there. Now, I don't recommend you ever do this because it's not great for usability, but it's good to know it's possible. If you decide you wanna change the color, maybe to black when you hover over it,. But you want the default color to be maybe a grayish color, you can do that. Refresh. It's gray. Hover over it. We underline it and we turn the text black. And what's nice about this is because we're doing CSS, we can control the visuals however we want. If we decide that we don't want this to be a horizontal navigation menu, we can bring it back to vertical easy as pie. And that's the point of CSS, it gives us full control over the styling of our website. And note that when we want to make these changes, we never have to edit our markup. There should be a separation, markup is for content, CSS files are for styling. So good job. In the next lesson, we're gonna take a look at forms.

Back to the top