CSS Lesson 3 Part 2

Building a CSS menu

Here is another useful way to use classes. Lets make a menu using only CSS and a table that has rollover effects. We are going to set up a special class just for the links in the menu. Why? Because you wouldn’t want the text links in a sentence to look like the ones in your menu.

We will call our menu class, “navlink.” We will use 3 standard selectors to define it, a:link, a:visited and a:hover. We will define these links just as we did in Lesson 2, but with a few more properties to add the rollover effects, and our new class at the beginning.

Let’s get started. Add this to a style sheet:

.navlink a:link {
font-family: Verdana, Geneva;
font-size : 80%;
font-weight : bold;
color: #000000;
text-decoration : none;
padding: 5px;
margin: 5px;
border : 1px outset gray;
display: block;
width: 100%;
}

.navlink a:visited {
font-family: Verdana, Geneva;
font-size : 80%;
font-weight : bold;
color: #000000;
text-decoration : none;
padding: 5px;
margin: 5px;
border : 1px outset gray;
display: block;
width: 100%;
}

.navlink a:hover {
font-family: Verdana, Geneva;
font-size : 80%;
font-weight : bold;
color: #000000;
text-decoration : none;
padding: 5px;
margin: 5px;
border : 1px inset black;
display: block;
background-color : #FFFFFF; width: 100%;
}

The new properties we added to the link selectors are:

padding: 5px;
margin: 5px;
border : 1px outset gray;
border : 1px inset black;
display: block;
background-color : #FFFFFF;

The padding and margin will keep a little space around the text in the table sells. The border will add a thin border around each cell. Also inset and outset will make the border change slightly on mouse over along with a color change. The display: block, will make the whole table cell clickable, not just the text. Since our background color is brown, we will add a new background color on the hover state to make it look like a rollover.

Now lets set up our table. For this example we will make it a left navigation table. I’m adding a background color of #BD8C40, which is a brownish color. In our pretend site, the left row is this color and 150 pixels wide. We will also add our newly defined class to the table. While we are at it, we’ll add our text links in there respective cells.

<table width="150" border="0" cellspacing="5" cellpadding="5" bgcolor="#BD8C40" class=”navlink”>

<tr>

<td><a href="home.htm">Home</a></td>

</tr>

<tr>

<td><a href="link1.htm">Link 1</a></td>

</tr>

<tr>

<td><a href="link2.htm">Link 2</a></td>

</tr>

<tr>

<td><a href="link3.htm">Link 3</a></td>

</tr>

</table>

When you are done, you should have a menu like this! Because of the display: inline-block we added, you don't even need to have the mouse over the text to click it.

I think this is pretty cool stuff. It sure dresses up a plain text menu. Now this like most CSS, it will not work in the older browsers. However, the links will still be there in their standard blue underlined text link style, which is the way the old browsers displays all text links anyway.

You could even dress this up a little more by replaceing the background color with an image. Here's how you would add a background image to this menu.

Add - background-image : url(images/image_off.gif); and a background-color to both the navlink a:link and navlink a:visited selectors.

Add - background-image : url(images/image_on.gif); in the navlink a:hover selector and change the bakground-color to match the color of the image that you are using.

We added a backgound color to the first two selecters. You need to set that background color to one that matches the background image. Do the same for the background color in the navlink a:hover. This will ensure that your text links will show up until your images load. The images are small, so should load fast, but there is always a few seconds of load time delay. You'll notice that the fisrt background image says image_off.gif. That's becuase it is the off or up state image. The image you add to the hover selector, is the image_on.gif or the down state image.

I hope this was useful for you. I know when I learned this, it sure brightened up a few sites I was working on.

More lessons and examples comming soon.