HTML Menu

With this tutorial, you can create a simple, nice looking menu complete with rollever effects.

It seems like recently, simple sites are coming more into style. Heavy graphic and flash are out, slick design and coding skill is in.

To start off, you need to just make a basic table with a cell for each menu item. Something like this will do:

<table width="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000">
<tr>
<td bgcolor="#FFFFFF">Home</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">Images</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">Help</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">Contact</td>
</tr>
</table>

There. Now we have a simple table that will contain our links. The next step is to build in the mouse over effects. We are gonna put code into each TD tag, telling the browser how to act with the mouse interaction.

That makes the first cell of the table act differently. Eventually, you'll give this treatment to every cell, but for now, just work on one. What that chunk of code does is make the cell change background color with touched by the mouse cursor. When the mouse leaves, the color goes back to what it was. Now we need to make it a link. This is done by adding another little snippet

Now we added two things here. First, the location where the browser will go when the cell is clicked. Second, we added a command to change the mouse pointer to a hand, the common symbol for a link. The table should now look like this:

Now that the top cell works fine, go down and repeat the process for all remaining cells. The complete code for this table should look like this:

<table width="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000">
<tr>
<td bgcolor="#FFFFFF" onMouseOut="this.style.background='#F7F7F7'"
onClick="parent.location='index.php'" onMouseOver="this.style.background ='#E8E8E8';
this.style.cursor = 'hand'">Home</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" onMouseOut="this.style.background='#F7F7F7'"
onClick="parent.location='images.php'" onMouseOver="this.style.background ='#E8E8E8';
this.style.cursor = 'hand'">Images</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" onMouseOut="this.style.background='#F7F7F7'"
onClick="parent.location='help.php'" onMouseOver="this.style.background ='#E8E8E8';
this.style.cursor = 'hand'">Help</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" onMouseOut="this.style.background='#F7F7F7'"
onClick="parent.location='contact.php'" onMouseOver="this.style.background ='#E8E8E8';
this.style.cursor = 'hand'">Contact</td>
</tr>
</table>

Now, with some tweaking, you can make a smooth looking menu. I added some extra cell padding and some little images, and ended up with this.