Webforumz Newsletter - August 2007
Tutorials
CSS Hover Effects
Hover the buttons below to see the effect. The first nav item is set to active with the id "current".
The purpose of this is to load a single image that can be used to handle all states throughout a nav menu keeping load times down and accessibility up.
The image file
The CSS
ul#nav {
padding:0;
margin:0;
list-style:none;
}
ul#nav li {
float:left;
margin:0 1px 0 0;
}
ul#nav li a {
width:200px;
height:100px;
display:block;
text-decoration:none;
background:url("button.jpg") no-repeat 0 0;
}
ul#nav li a:hover {
background:url("button.jpg") no-repeat 0 -100px;
}
ul#nav li#current a {
width:200px;
height:100px;
display:block;
text-decoration:none;
background:url("button.jpg") no-repeat 0 -200px;
}
.clearing {
height:0;
overflow:hidden;
margin:-1px 0 0 0;
clear:both;
}
The HTML
<ul id="nav">
<li id="current"><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<div class="clearing"> </div>