Scripts

Menu met sprites

Door karel hertens -13-10-2010 01:24 -20.155 views

Ik heb voor mijn web-site een menu gemaakt dat gebruik maakt van 1 afbeelding voor alle plaatjes op mijn web-site. Ik ga hier een voorbeeld geven van hoe je voor een menu 1 plaatje kan gebruiken en toch verschillende kleuren kan krijgen. Als je over het menu gaat met je muis veranderd de kleur, als je klikt en als het menu actief is. Natuurlijk gaat dit ook om te testen en er achter te komen wat jullie ervan vinden. Voorbeeld www.statube.com (dit is mijn test domein) Het plaatje is te downloaden op http://www.statube.com/nav1.jpg

Download alle bestanden als ZIP

styles.css

ul#cool-menu {
	width: 760px; margin: 25px auto;
	list-style: none;
}
ul#cool-menu li { display: inline; }
	
ul#cool-menu li a {
	display: block; 
	float: left; 
	height: 42px;
	background-image: url(nav1.jpg); text-indent: -9999px;
}

	ul#cool-menu li a.home {
		width: 60px; 
		background-position: 0 0;	
	}
	ul#cool-menu li a.allvideos {
		width: 118px; 
		background-position: -60px 0;	
	}
	ul#cool-menu li a.toprated {
		width: 114px; 
		background-position: -178px 0;	
	}	
	ul#cool-menu li a.populair {
		width: 100px; 
		background-position: -292px 0;	
	}
	ul#cool-menu li a.members {
		width: 100px; 
		background-position: -392px 0;	
	}
	ul#cool-menu li a.register {
		width: 98px; 
		background-position: -492px 0;	
	}
	ul#cool-menu li a.logout {
		width: 88px; 
		background-position: -590px 0;	
	}
	ul#cool-menu li a.upload {
		width: 82px; 
		background-position: -678px 0;	
	}

	
	ul#cool-menu li a.homeactive {
		width: 60px; 
		background-position: 0 -84px;
	}
	ul#cool-menu li a.allvideosactive {
		width: 118px;
		background-position: -60px -84px;	
	}
	ul#cool-menu li a.topratedactive {
		width: 114px;
		background-position: -178px -84px;	
	}
	ul#cool-menu li a.populairactive {
		width: 100px;
		background-position: -292px -84px;	
	}
	ul#cool-menu li a.membersactive {
		width: 100px;
		background-position: -392px -84px;	
	}
	ul#cool-menu li a.registeractive {
		width: 98px;
		background-position: -492px -84px;	
	}
	ul#cool-menu li a.logoutactive {
		width: 90px;
		background-position: -590px -84px;	
	}
	ul#cool-menu li a.uploadactive {
		width: 80px;
		background-position: -680px -84px;	
	}



	ul#cool-menu li a.home:hover {
		background-position: 0 -42px;	
	}
	ul#cool-menu li a.home:focus {
		background-position: 0 -84px;
	}
	ul#cool-menu li a.allvideos:hover {
		background-position: -60px -42px;	
	}
	ul#cool-menu li a.allvideos:focus {
		background-position: -60px -84px;	
	}
	ul#cool-menu li a.toprated:hover {
		background-position: -178px -42px;	
	}
	ul#cool-menu li a.toprated:focus {
		background-position: -178px -84px;	
	}
	ul#cool-menu li a.populair:hover {
		background-position: -292px -42px;	
	}
	ul#cool-menu li a.populair:focus {
		background-position: -292px -84px;	
	}
	ul#cool-menu li a.members:hover {
		background-position: -392px -42px;	
	}
	ul#cool-menu li a.members:focus {
		background-position: -392px -84px;	
	}
	ul#cool-menu li a.register:hover {
		background-position: -492px -42px;	
	}
	ul#cool-menu li a.register:focus {
		background-position: -492px -84px;	
	}
	ul#cool-menu li a.logout:hover {
		background-position: -590px -42px;	
	}
	ul#cool-menu li a.logout:focus {
		background-position: -590px -84px;	
	}
	ul#cool-menu li a.upload:hover {
		background-position: -678px -42px;	
	}
	ul#cool-menu li a.upload:focus {
		background-position: -678px -84px;	
	}
	
ul#cool-menu li .sub {
	position: absolute; /*--Important--*/
	top: 44px; left: 0;
	z-index: 99999;
	background: #344c00 url(sub_bg.png) repeat-x; /*--Background gradient--*/
	padding: 20px 20px 20px;
	float: left;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	display: none; /*--Hidden for those with js turned off--*/
}

ul#cool-menu li .row { /*--If needed to break out into rows--*/
	clear: both;
	float: left;
	width: 100%;
	margin-bottom: 10px;
}
ul#cool-menu li .sub ul{
	list-style: none;
	margin: 0; padding: 0;
	width: 150px;
	float: left;
}
ul#cool-menu .sub ul li {
	width: 100%; /*--Override parent list item--*/
	color: #fff;
}
ul#cool-menu .sub ul li h2 { /*--Sub nav heading style--*/
	padding: 0;  margin: 0;
	font-size: 1.3em;
	font-weight: normal;
}
ul#cool-menu .sub ul li h2 a { /*--Sub nav heading link style--*/
	padding: 5px 0;
	background-image: none;
	color: #e8e000;
}
ul#cool-menu .sub ul li a {
	float: none;
	text-indent: 0; /*--Override text-indent from parent list item--*/
	height: auto; /*--Override height from parent list item--*/
	background: url(navlist_arrow.png) no-repeat 5px 12px;
	padding: 7px 5px 7px 15px;
	display: block;
	text-decoration: none;
	color: #fff;
}
ul#cool-menu .sub ul li a:hover {
	color: #ddd;
	background-position: 5px 12px ;/*--Override background position--*/
}

testmenu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>cool menu</title>

<link rel="stylesheet" href="styles.css" />
</head>

<body>



<ul id="cool-menu">
	<li><a href="#" class="home"></a></li>
	<li><a href="#h" class="allvideos"></a></li>
	<li><a href="#h" class="toprated"></a></li>
	<li><a href="#h" class="populair"></a></li>
	<li><a href="#h" class="members"></a></li>
	<li><a href="#h" class="register"></a></li>
	<li><a href="#h" class="logout"></a></li>
	<li><a href="#h" class="upload"></a></li>
</ul>


</body>
</html>