gesteves · September 7, 2009 04:49
diff --git a/Animated menu example b/Animated menu example
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
 	<title></title>
 	<style type="text/css">
 	li {  
 		list-style-type:none;  
 		position:relative;  
 		width:109px;  /* Gives the li the same height and width as the first frame */
 		height:46px;  
 		background:url('http://www.szkolazdusza.com/images/menu-item01-bkg.jpg') top left no-repeat;  
 		text-indent:-10000px;  /*Hides the menu item text way to the left*/
 	}  

 	li span {  /* Places the span of the same dimensions right on top of the li */
 		display:block;  
 		width:109px;  
 		height:46px;  
 		position:absolute;  
 		top:0;  
 		left:0;  
 		background:url("http://www.szkolazdusza.com/images/menu-item01-bkg.jpg") 0 -414px no-repeat;  /* Offsets the image 414px to the top, so it's actually the last frame in the image */
 		z-index:1; 
 		opacity:0; /* Makes it transparent until you hover over it */ 
 		filter:alpha(opacity = 0);  /* For IE compatibility; it doesn't support opacity */
 		-webkit-transition: opacity 0.25s linear;  /* Tells WebKit how you want the transition */
 	}  

 	li span:hover {  /* Makes the span visible when you hover it, animated according to the -webkit-transition property */
 		filter: alpha(opacity = 100);  
 		opacity:1;  
 	}
 	</style>
 </head>
 <body>
 	<ul>
 	<li>Menu Item<span></span></li>
 	</ul>
 </body>
 </html>