Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
Our menu is almost complete. Really, the last major thing that we need to do is add a rollover effect to add a little bit of interactivity to the menu. So I am going to be working with the vertical.htm from the 03_07 directory. And in order to create a rollover effect, we are going to have to create a new selector. So I'm going to scroll down in my vertical menu styles, and I am just going to create a new selector right below my last one here. Now, we've been using the pseudo-class selectors for a while now. So, the hover pseudo-class selector probably will come as no surprise to you that, that is what we need to use. So, I'm going to type in li a:hover.
So again, that's targeting any links inside of the list item, and we are going to use the hover pseudo-class, so we are saying that when those links are being hovered over. All right, I am going to go ahead and open and close my curly brackets there. And inside that, I am just going to apply some properties that I think would make a nice rollover. First thing I am going to do is change the background color. We've got sort of a bright orange color for the default menu. So obviously, when you do some type of a hover, some type of rollover, you want to do either a darker or lighter color based upon what's going on with the rest of your layout.
Since we have a pretty light background color and a fairly bright and light menu, I am going to go dark with rollover. So here I am going to type in #87492F. Now, I'm also going to just kind of show you some of the things that you can do with borders. I am going to do a border-left of 0.4 ems. We'll do it solid, and we'll do it white. Then finally, I'm also going to go and change the width. I am going to set the width to 7.6 ems.
Now, you are probably going, what in the world is going on there? Well, remember, the width of our menu is 8 ems. If I add a border to it, it's adding to the width of the entire thing, so our menu would flex when we roll over it. But by subtracting the value that we used for the border with the overall width, they are going to stay the same size. So if I save this, go back into my browser , and refresh this, now when I roll over it, notice that not only do I get the background color that I applied there, we also get the border that shows up.
And because the border is sort of taking away a little bit of space because the overall width stays the same, our text is also indenting a little bit. Now, I kind of like that effect. I've used it before where I've had text that indents and adds some borders to one side or the other, or maybe sometimes even both of them, and you can see it gives a nice little effect. But if you want to keep your menu simple, you really only need to do something like a background color, so if I go back to my styles, I could say get rid of the border and the width and feel free to keep it if you like it. But if I save this, go back in, and refresh it, you will notice now we just have the background color, but that's still incredibly effective.
There are just a couple of things that I want to talk about before we move on about rollovers, because I've seen a lot of people do rollover styles that probably go a little bit further than they should. There are just some basic points I want you to keep in mind. First thing is any rollover styling, the text should still be legible. You still want people to be able to read what it is that they are on top of and what menu item they're selecting. It shouldn't distract from the actual content of the link. I've seen animated GIF files placed in rollovers, I've seen videos.
I mean, I've seen crazy stuff done. And it takes away from what people are actually looking at, the content and link, and you're sort of defeating the purpose of them reading it in the first place. Any type of animations that you do, if you have some rollovers that cause items to slide or get bigger or fade in, fade out, those animations should be subtle. If they're too abrupt, if they are too quick, or if there's a lot to them, again, it's going to distract from the purpose of the rollover. And if you stay with the same color scheme, that's really important. And using some type of a good contrast with the original link color, you want to do that as well.
In this case, we are still staying with sort of an orange, we are just going a lot darker with it. So you definitely want to stay within the same color scheme. I have seen people do rollovers that maybe they imported from some other area, and it doesn't really go along with their site. So, it should integrate in with the site just as well as everything else. Now, you can probably tell by looking at my menu, I personally tend to like simple, really clean designs. But just because my design aesthetic leans towards minimalism doesn't mean that yours does. So, I encourage you experiment with your menu properties and achieve the styling that you like and that fits your style.
Just keep in mind, your menu should fit seamlessly into your overall site design. That's probably most important. And the main purpose of your menu--never lose sight of this--the main purpose of your menu is to clearly communicate the contents of the menu itself.
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.