Menu Rollover Effect using tables

Bookmark with

StumbleUpon
del.icio.us
Digg it
reddit
Furl
Spurl
ma.gnolia
Yahoo MyWeb
Windows Live

Sponsors

Introduction

As a follow-on from Menu Rollover Effect with HTML Lists this tutorial shows you how to create the same rollover effect using tables instead of lists.

Tested in

Create the links

First we create the links. Each link is contained in a table cell, the entire table is nested in a DIV which I will explain later. We assign the same class to both the table and the div.

<div class="menu">
<table summary="" cellpadding="1" cellspacing="1" class="menu">
<tr>
<td><a href="#" onfocus="this.blur()"> Link 1</a></td>
</tr>
<tr>
<td><a href="#" onfocus="this.blur()"> Link 2</a></td>
</tr>
<tr>
<td><a href="#" onfocus="this.blur()"> Link 3</a></td>
</tr>
<tr>
<td><a href="#" onfocus="this.blur()"> Link 4</a></td>
</tr>
<tr>
<td><a href="#" onfocus="this.blur()"> Link 5</a></td>
</tr>
</table>
</div>

The result is (centered for presentation):

Ok, not so pretty so now we specify styles for these. For the table (.menu) we specify the following:

table.menu a {
width:125px;
border:1px solid #333333;
display: block;
}

Result:

The outer div "div.menu a" is where we specify our base styles and it also acts as a workaround for crappy NS4x which does not like borders on links. Told you we need it!

div.menu a {
color: #333333;
background: #ffffff;
text-decoration:none;
font-size:11px;
line-height:16px;
font-family: Tahoma, verdana, sans-serif;
padding: 2px 5px;
}

We then specify the link colours including the hover styles which creates our highlight effect:

div.menu a:link {
color: #333333;
background: #cccc99;
}

div.menu a:active {
color: #000000;
background: #cccc99;
}

div.menu a:visited {
color: #333333;
background: #cccc99;
}

div.menu a:hover {
color: #eeeeee;
background: #333333;
border:1px solid #000000;
}

And the result?

IE can be a little slow changing styles on links so we have to specify the following for the outer div:

div.menu (
position:absolute;
top:0;
left:0;
)

Thats it!

Go to the HTML List version...

How to add an IE transition effect...