Introduction
This tutorial will teach you how to get effects that are similar to those on the navigation at www.ctrlinternet.com. The techniques used are Javascript's onmouseover and onmouseout HTML attributes as well as CSS1 classes.
On many sites these days the webmasters designed them so that their navigation is in table cells or dividers (<div>s) sadly, we don't have a magic HTML tag that does the job for us so we are once again going to use CSS. Since CSS1 is supported in most browsers and sometimes we can't use CSS2 (because Internet Explorer 7 and under aren't CSS2 compatible)
Starting off...
Define the following ID and classes in your CSS stylesheet:
|
.out {
background: #FFFFFF; font-family: Verdana, Courier New; font-size: 11px; text-decoration: none; } .over { background: #C0C0C0;<br /> font-family: Verdana, Courier New; font-size: 11px; text-decoration: underline; font-weight: bold; cursor: hand; } |
Done that? Okay, now we're going to add the Javascript code to the navigation table cells.
PHP site users
If you use PHP for your site, scroll down to the next section.
The code..
| <td class="out" onmouseover="this.className='over'" onmouseout="this.className='out'">Your navigation link here</td> |
Put this code in for all your navigation cells, then mouseover them! You should get changing colours and text effects when you roll your mouse over them.
PHP site users
Here is your code, if you don't want to use it then use the other method.
|
<?
$effect = "class="out" onmouseover="this.className='over'" onmouseout="this.className='out'""; ?> |
And all you have to do in your table cells is this:
| <td <? echo $effect; ?>>Navigation link here</td> |
This effect is very good for any type of site with a table layout. You can do this with divs too if you have enough CSS knowledge. If you would rather do it with CSS2 then stay tuned for my next tutorial.
