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.
Welcome back. I hope you had fun experimenting with our main site navigation, and I'm hoping most of you played around with creating your own version of the menu bar. Let's take a look at the finished files and go over how I styled the menu based on the parameters that I gave you in the lab. Now, in this case, I really don't expect your code to match mine. Just examine the reasons why I style the menu the way that I did and compare it with your own reasoning. Again, I have the main.css file open and the index.htm file open.
Now these are coming from the 04_09 > finished_files folder, and remember the CSS is actually inside the _css folder. I also have campus_portal open just to kind of show you how I am applying that class. You certainly don't need to have that open. I just have it open so I can point out the class application for the indication of the current page. The first thing that I had to tackle was making the menu appear just to the right of the RA logo and stretch for the remainder of the layout, just as you're seeing right here.
In order to do that, I targeted the nav element. It's a natural place to start. I did that by floating it to the left, and I gave it a width of 800 pixels. Now the reason that I gave it a width of 800 pixels is the body is set to be 960 pixels wide and the RA logo is 160 pixels wide, that leaves me 800 pixels left. So I went ahead and took it. Now, if I had said 100%, and some of you may have done that, it would have stretched a little bit further because it would've tried to take 100% of its parent element which would have been the body, which would've calculated out to 960 pixels, and that would have broken the layout.
So I couldn't use 100% there. I went ahead and used pixel decorations. And you are going to see that I used pixels throughout this particular layout. I don't normally do fixed layouts, but since this one is a fixed layout, I'm using pixels instead of ems. If you chose to use relative unit of measurement like an em, there is nothing wrong with you doing that as long as you got the results that you are looking for. A problem that you may have run into is you may have experienced some of the other elements shifting around or changing once you floated the nav element.
Look at the source code. If I scroll down, I went ahead and applied to the nav element the class of cf to go ahead and clear that nav element and not affect the elements that come after it in normal document flow. So hopefully, you remembered that from the previous chapter. If you didn't, it's a very easy fix. Just go ahead and apply that class. The clearfix is built into the styles already, it's right here. So we don't really need to worry with that. All we need to do is apply the class.
The second thing that I wanted you to do is set the background color of the menu to sort of that darker, almost black color with a transparency applied to it. Again, I did that right here in the same selector. And I just used the value that was given in the lab instructions. If you change that up a little bit, and you wanted to change the styling, there is absolutely nothing wrong with that. If you're happy with the way that that turned out, then that's perfect. If you use this value, too, that's fine. The next thing that I asked you to do is go ahead and space those menus out evenly, so they take up the majority of the available space.
And I accomplished that a couple of different ways, the main way was in the page header li, so targeting the list items themselves. Notice that they are floated, and that's going to help me display the menu horizontally, obviously. But I went ahead and gave it a margin-right of 24 pixels so that's going to space them out, and I'd love to tell you that I had some secret formula that allowed me arrive at that 24 pixels. But honestly, I just kind of experimented with it until they were taking up enough of the menu, and I felt like I had enough space between them, but where they weren't spaced too far out.
It goes without saying that you are creating a horizontal menu, so there were a few things that hopefully you kind of took care of on your own, one of those would be floating the list items to the left. Now if you chose to use the display inline method, that's viable, you certainly could have done that, but obviously you were going to have to go a little bit different in the way that you handled all of the styling on the list items and the links if you went that route. I have also set list-style type to none on the unordered list. Those are just some minor things that I had to go ahead and take care of right off the bat.
For the menu itself, I went ahead and gave it a height of 40 pixels, and then I gave it a little bit of padding up top of 5 pixels. Now the reason I did that I just like the way the height looks in relation to the text at 40 pixels. I gave it a little bit of extra 5-pixels worth of padding up top, just in case some of the menu got cut off at the very top of the page, so just to give my menu a little bit of extra space coming down. Now in terms of the styling of the links themselves, the next parameter you were given was to use white text and sort of an orange color for the rollover color.
So I have got two selectors that are handling that for me, one is targeting the links themselves inside the list items, and the other one of course is the hover pseudo-class selector. Inside the link one, I just chose a color of white, and inside the hover I just chose the color property and applied that orange color to it. Again, if you chose different values, there is nothing wrong with that. I also wanted to make all the links text lowercase. So to do that, inside the link selector, I use the text transform of lowercase. I also wanted the text to be slightly smaller than the default text size, and that's why I am using a font size of 0.9 ems.
I want the text to center vertically within the menu, so I use the exact same line-height, which is 40 pixels as I used for the height of the nav bar. Now I know I have got a little extra 5 pixels worth of padding up top. But you will notice when I preview this in the browser, it really doesn't look awkward. The reason I like giving a little bit of extra space when I am butting up a menu up at the very top is that those tend to look actually more narrow than they are. And if you didn't, that's fine, there is nothing wrong with that. If you're happy with the results, that's all that really matters.
Now I also wanted to add a little bit of padding to the links themselves, and I really left that up to your discretion. You'll notice that for padding, I didn't do any padding top or bottom. Remember, I've got my line-height that's controlling the placing of the text vertically, but then right and left I did 20 pixels worth of padding. So it's interesting, you have got 20 pixels on either side, and then you also have a margin right of 24 pixels that's spacing them out. For our rollovers, the only other thing I really wanted to do is make sure that that default sort of diagonal graphics pattern wasn't showing up on our rollover.
So I just went ahead and applied a background of none, which would turn that off. Now finally, I wanted to indicate the current page, so I created one selector down at the bottom that's targeting not only any link with the class current, so I just went ahead and used the same class name that I used for the chapter, which was current. But I also applied it to the hover as well, so it wouldn't change states if somebody hovered over it. I used a background color that was almost white with 40% opacity, I changed the color of the text to black, I set a border-radius on top of 5 pixels for the top-left and right corner, that's going to give me that sort of tabbed look that I was going for there, and then I changed the cursor to display the default.
In order to make this work, I had to remember to go into each of the individual pages and modify the menu so that that particular link would have the class of current applied to it as well. So if you skipped that step, writing those selectors really wasn't going to help you. With all that being said and done, when I open up page within the browser, I get a very simple rollover. And then when I click on links, I get the current page indicator using that current class. If you couldn't quite get it to work just concentrate on the properties or the values that are causing it to fail or the properties that you have left out based on the code that I just showed you.
Now even though creating menus is relatively simple, integrating them within the structure of a larger site is not. So don't get frustrated if it didn't work the first time you tried it. Just keep focusing on what makes the menus work and keep experimenting with building your own.
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.