spritemenu--用css中sprite技术制作的menu
[attach]5398[/attach]
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sprite Menu </title>
<style type="text/css">
div#spritemenu {
height: 50px;
width: 400px;
font-size: 9px;
background-image: url(http://bbs.pickbar.com/month_0806/20080613_01f2c1d8704e1ad6377b14ikJ95ibtyT.gif);
overflow: hidden;
}
div#spritemenu ul li {
display: inline;
margin: 0px;
padding: 0px;
}
div#spritemenu ul li a {
display: block;
position:relative;
height: 50px;
}
div#spritemenu ul li a:hover {
background-image: url(http://bbs.pickbar.com/month_0806/20080613_01f2c1d8704e1ad6377b14ikJ95ibtyT.gif);
}
div#spritemenu ul {
margin: 0px;
padding: 0px;
list-style-type:none;
height: 50px;
}
div#spritemenu span {
display: none;
}
div#spritemenu li.buttonA a {top: 0px; left: 0px; width: 80px; background-position: 0px 0px;}
div#spritemenu li.buttonB a {top: -50px; left: 82px; width: 64px; background-position: -82px 0px;}
div#spritemenu li.buttonC a {top: -100px; left: 148px; width: 76px; background-position: -148px 0px;}
div#spritemenu li.buttonD a {top: -150px; left: 226px; width: 70px; background-position: -226px 0px;}
div#spritemenu li.buttonE a {top: -200px; left: 298px; width: 102px; background-position: -298px 0px;}
div#spritemenu li.buttonA a:hover {background-position: 0px -50px;}
div#spritemenu li.buttonB a:hover {background-position: -82px -50px;}
div#spritemenu li.buttonC a:hover {background-position: -148px -50px;}
div#spritemenu li.buttonD a:hover {background-position: -226px -50px;}
div#spritemenu li.buttonE a:hover {background-position: -298px -50px;}
</style>
</head>
<body>
<div id="spritemenu">
<ul>
<li class="buttonA"><a href="#"><span>Home</span></a></li>
<li class="buttonB"><a href="#"><span>About</span></a></li>
<li class="buttonC"><a href="#"><span>Contact</span></a></li>
<li class="buttonD"><a href="#"><span>Forum</span></a></li>
<li class="buttonE"><a href="#"><span>Guestbook</span></a></li>
</ul>
</div>
</body>
</html>
[/html]