I am assuming at this point that anyone can submit a tutorial. If I am incorrect in this assumption, please let me know. Second, I had posted this little ditty in my blog, but since no one reads it, I thought I'd post it here. Hopefully, someone will be able to use it.
Anyway, here is a nice little menu technique with no javascript!
The menu is made up of images - each button will need two images (one for the up-state, one for the down-state) and these images will need to be the same size. This example uses 5 buttons with up-state and down-state images like these:
(Up-state)
(Down-state)
Please also note the HTML images are static, meaning they are always present, merely covered up by the CSS images on mouse-over. This could make for some interesting designs using transparencies.
The CSS code (buttons in down-state):
CODE
body {background-color: #ffffff;}
/*Start button 1*/
div.nav1 {
height: 50px;
width: 150px;
margin-top:15px;
padding:0;
background-image:url("img/btn_down1.png");
}
div.nav1 a, div.nav1 a:link, div.nav1 a:visited {display:block;}
div.nav1 img {width:100%;height:100%;border:0;}
div.nav1 a:hover img {visibility:hidden;}
/*End button 1*/
/*Start button 2*/
div.nav2 {
height: 50px;
width: 150px;
margin-left:153px;
margin-top:-50px;
padding:0;
background-image:url("img/btn_down2.png");
}
div.nav2 a, div.nav2 a:link, div.nav2 a:visited {display:block;}
div.nav2 img {width:100%;height:100%;border:0;}
div.nav2 a:hover img {visibility:hidden;}
/*End button 2*/
/*Start button 3*/
div.nav3 {
height: 50px;
width: 150px;
margin-left:306px;
margin-top:-50px;
padding:0;
background-image:url("img/btn_down3.png");
}
div.nav3 a, div.nav3 a:link, div.nav3 a:visited {display:block;}
div.nav3 img {width:100%;height:100%;border:0;}
div.nav3 a:hover img {visibility:hidden;}
/*End button 3*/
/*Start button 4*/
div.nav4 {
height: 50px;
width: 150px;
margin-left:459px;
margin-top:-50px;
padding:0;
background-image:url("img/btn_down4.png");
}
div.nav4 a, div.nav4 a:link, div.nav4 a:visited {display:block;}
div.nav4 img {width:100%;height:100%;border:0;}
div.nav4 a:hover img {visibility:hidden;}
/*End button 4*/
/*Start button 5*/
div.nav5 {
height: 50px;
width: 150px;
margin-left:612px;
margin-top:-50px;
padding:0;
background-image:url("img/btn_down5.png");
}
div.nav5 a, div.nav5 a:link, div.nav5 a:visited {display:block;}
div.nav5 img {width:100%;height:100%;border:0;}
div.nav5 a:hover img {visibility:hidden;}
/*End button 5*/
The HTML code (buttons in up-state):
CODE
<div class="nav1"><a href="#"><img src="img/btn_up1.png" alt="" /></a></div> <!--Button 1 static image-->
<div class="nav2"><a href="#"><img src="img/btn_up2.png" alt="" /></a></div> <!--Button 2 static image-->
<div class="nav3"><a href="#"><img src="img/btn_up3.png" alt="" /></a></div> <!--Button 3 static image-->
<div class="nav4"><a href="#"><img src="img/btn_up4.png" alt="" /></a></div> <!--Button 4 static image-->
<div class="nav5"><a href="#"><img src="img/btn_up5.png" alt="" /></a></div> <!--Button 5 static image-->
Two samples of this code in action can be found
here.
Happy coding!
CSS Image Swap Menu
24 Mar, 2008 - 08:12 AM
| 