Video: Stripping list styling

In this chapter we're going to turn our attention to creating horizontal menus. Although they're a little bit more complex than vertical menus, they actually use many of the same techniques. That means that we're going to be covering a lot of those steps again in this chapter, which is a good thing, because it reinforces the techniques themselves, and it highlights the steps that are consistent regardless of which type of menu you're working with. Knowing what's needed for both types of menus can really help you when you're planning out your global styles.

Join James Williamson, as he shows you how to create elegant menus, links, and buttons that help visitors navigate your site faster and more intuitively. The course covers creating structured navigation that is accessible and clean, styling links, and building horizontal and vertical menus with rollover effects. The last chapter reveals how to create stylish buttons with special effects and CSS sprites.

Stripping list styling

In this chapter we're going to turn our attention to creating horizontal menus.Although they're a little bit more complex than vertical menus, they actually use many of the same techniques.That means that we're going to be covering a lot of those steps again in this chapter,which is a good thing, because it reinforces the techniques themselves, and it highlightsthe steps that are consistent regardless of which type of menu you're working with.Knowing what's needed for both types of menus can really help you when you're planning out your global styles.

As we start to build a horizontal menu, we're going to begin at the exact same place westarted with our vertical menus, which is to remove the default list styling.Before we do that, however, I want to just take a look at what we're going to be buildingover the course of this chapter.So I have the finished version of our horizontal menu opened up in the browser, and as youcan see, it has a couple of things that the vertical menu did not.The first is an indicator of the current page, so we're going to tackle how to indicate wherethe browser currently is within your site.

And then it's got this nice two-toned color navigation background bar to it.And then the rollovers look like tabs, almost like the current page indicator, but obviouslythey're a little bit more interactive.So I'm going to open up horizontal.htm which you can find in the 04_01 directory.Now before we get into writing our first selector, I want to point out something about this menu.If I scroll down I can see that this menu is just a smidge more complex than the onewe we're building in the vertical menu chapter, and that's because we have the addition ofa nav element all the way around it.

You know, most of the time when you create a vertical or a horizontal menu, you're probablynot going to have just the unordered list, sometimes you will, and you could use a classor an ID to identify the purpose behind the unordered list.But most times it'll be wrapped within either a nav element or some type of div tag or someother structure to indicate its purpose.So I went ahead and reflected that there, and we're going to use that to our advantagea little bit later on, as we use the nav element as not only as a way to identify this unorderedlist, but also as a styling hook as well.

So the first thing I want to do, I'm going to scroll up into my CSS, and it's at verybottom of it, I have a little comment there that says the horizontal menu styles go here.So again, the first thing we want to do is just strip out all of that sort of defaultlist styling, and I'm just going to write a selector that says ul, li and of coursedoing that is going to style not only the unordered list but the list item as well,so I'm kind of just killing two birds with one stone here.So inside of that I'm going to type in a margin of 0, and I'm going to do a padding of 0.

Again, remember a lot of browsers will control the indent of list items and list by usinga combination of margins and padding, so by stripping both of them out, you're strippingall of that default styling.And just underneath that I'm going to set list-style to none.So if I save that and preview this in my browser as well, we can see that our horizontal menuis starting off exactly where we started off with the vertical menu last time, which isan unordered list of links with the default list styling stripped out of it.

Essentially, we are starting at the exact same place that we did with our vertical menus.Now, rather than moving on to styling the links this time, we're actually going to need todo another step first, and that would be to display our links horizontally, and we'regoing to tackle that in the next exercise.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.