This tutorial will aid in the creation of a simple menu role over effect using CSS (Cascading Style Sheets). It is possible to use other tools, like JavaScript, Ajax or DHTML, to create this effect, though for this type of effect CSS is the optimum choice. CSS tends to be supported by more browsers, though not all functions are available to every browser, and can't as easily be turned off by the user. If a user turns off JavaScript the site will not be displayed as intended. Another benefit of this CSS menu effect is no graphics are necessary. This saves the user from seeing missing link icons if the file is not loaded properly. It is also very small in size making it load faster, and updating or fixing the menu is much quicker than recreating new graphics.
Step 1:
Create a table that will hold the menu:
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Step 2:
Add the hyperlinks used in the menu:
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="(EmptyReference!)">button 1</a></td>
<td><a href="(EmptyReference!)">button 2</a></td>
<td><a href="(EmptyReference!)">button 3</a></td>
</tr>
</table>
Step 3:
Create the CSS definitions:
.menu { color: #f5f5f5; font-weight: bold; background-color: #898978; text-decoration: none; text-transform: uppercase; padding: 5px; display: block; }
a.menu:link { color: #fff; text-decoration: none; }
a.menu:visited { color: #fff; text-decoration: none; }
a.menu:hover { color: #fc0; background-color: #656659; text-decoration: none; }
a.menu:active { color: #fff; text-decoration: none; }
Step 4:
Attach the properties of class menu to the links
<table width="535" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a class="menu" href="(EmptyReference!)">button 1</a></td>
<td width="1"></td>
<td><a class="menu" href="(EmptyReference!)">button 2</a></td>
<td width="1"></td>
<td><a class="menu" href="(EmptyReference!)">button 3</a></td>
</tr>
</table>
Here is a horizontal menu in action.
Here is a vertical menu in action.
|
