|
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#navA {
padding:0;
margin:0;
list-style:none;
}
ul#navA li {
float:left;
margin:0 1px 0 0;
}
ul#navA li a {
width:200px;
height:100px;
display:block;
text-decoration:none;
background:url("button.jpg") no-repeat 0 0;
}
ul#navA li a:hover {
background:url("button.jpg") no-repeat 0 -100px;
}
ul#navA 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="navA">
<li id="current"><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<div class="clearing"> </div>
Mark is a web developer for a top 10 interactive marketing agency in Dallas Texas. You can find Mark's site at: newguyinennis.com
|
Submit Your Article
Announcements
Contact
