Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
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.
As we start to build a horizontal menu, we're going to begin at the exact same place we started 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 building over the course of this chapter. So I have the finished version of our horizontal menu opened up in the browser, and as you can 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 where the 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 obviously they'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 one we we're building in the vertical menu chapter, and that's because we have the addition of a nav element all the way around it.
You know, most of the time when you create a vertical or a horizontal menu, you're probably not going to have just the unordered list, sometimes you will, and you could use a class or 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 some other structure to indicate its purpose. So I went ahead and reflected that there, and we're going to use that to our advantage a little bit later on, as we use the nav element as not only as a way to identify this unordered list, 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 very bottom 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 default list styling, and I'm just going to write a selector that says ul, li and of course doing 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 using a combination of margins and padding, so by stripping both of them out, you're stripping all 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 menu is starting off exactly where we started off with the vertical menu last time, which is an 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 to do another step first, and that would be to display our links horizontally, and we're going to tackle that in the next exercise.
There are currently no FAQs about CSS: Styling Navigation.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.