Deskmodder.de

Code: Alles auswählen

	<div id="menu">
		<ul>
			<li id="first" ><a href="<?php bloginfo('url'); ?>/start"<?php if ( is_page('start') ) { echo(" class='active'"); }?>><span>start</span></a></li>
			<li id="second" ><a href="<?php bloginfo('url'); ?>"><span>news</span></a></li>
			<li id="third" ><a href="<?php bloginfo('url'); ?>/suite"<?php if ( is_page('suite') ) { echo(" class='active'"); }?>><span>suite</span></a></li>
			<li id="fourth" ><a href="<?php bloginfo('url'); ?>/team"<?php if ( is_page('team') ) { echo(" class='active'"); }?>><span>team</span></a></li>
			<li id="fifth" ><a href="<?php bloginfo('url'); ?>/about"<?php if ( is_page('about') ) { echo(" class='active'"); }?>><span>about</span></a></li>
		</ul>
	</div>

Code: Alles auswählen

#menu{
	height:31px;
	width:500px;
	margin:0;
	padding:0;
	background-image:url(style/bg-header.png);
	background-position:0px -161px;
	background-repeat:no-repeat;}
	
#menu ul{
	margin:0;
	padding:0;}

#menu ul li{
	padding: 0;
	margin: 0;
	float:left;
	display:block;}

#menu ul li a{
	height:31px;
	margin:0;
	padding:0;
	border:none;
	text-decoration:none;
	color:#FFFFFF;
	text-align:center;
	font-size:10px;
	font-weight:normal;
	display:block;}

#menu ul li a span{
	display:block;
	overflow:hidden;
	font-size:1px;
	height:0;
	margin:0;
	padding:0;}
	
#menu #first a{
	background: #252525 url(style/bg-menu.png) no-repeat 0 0px;
	width:103px;}
	
#menu #first a:hover{
	background: #232D34 url(style/bg-menu.png) no-repeat 0 -31px;
	width:103px;}
	
#menu #first a:active, #menu #first .active{
	background: #252525 url(style/bg-menu.png) no-repeat 0 -62px;
	width:103px;}

#menu #second a{
	background: #252525 url(style/bg-menu.png) no-repeat -103px 0px;
	width:98px;}

#menu #second a:hover{
	background: #232D34 url(style/bg-menu.png) no-repeat -103px -31px;
	width:98px;}
	
#menu #second a:active, #menu #second .active{
	background: #232D34 url(style/bg-menu.png) no-repeat -103px -62px;
	width:98px;}
	
#menu #third a{
	background: #252525 url(style/bg-menu.png) no-repeat -201px 0px;
	width:98px;}

#menu #third a:hover{
	background: #232D34 url(style/bg-menu.png) no-repeat -201px -31px;
	width:98px;}
	
#menu #third a:active, #menu #third .active{
	background: #232D34 url(style/bg-menu.png) no-repeat -201px -62px;
	width:98px;}
	
#menu #fourth a{
	background: #252525 url(style/bg-menu.png) no-repeat -299px 0px;
	width:98px;}

#menu #fourth a:hover{
	background: #232D34 url(style/bg-menu.png) no-repeat -299px -31px;
	width:98px;}
	
#menu #fourth a:active, #menu #fourth .active{
	background: #232D34 url(style/bg-menu.png) no-repeat -299px -62px;
	width:98px;}
	
#menu #fifth a{
	background: #252525 url(style/bg-menu.png) no-repeat -397px 0px;
	width:103px;}

#menu #fifth a:hover{
	background: #232D34 url(style/bg-menu.png) no-repeat -397px -31px;
	width:103px;}
	
#menu #fifth a:active, #menu #fifth .active{
	background: #232D34 url(style/bg-menu.png) no-repeat -397px -62px;
	width:103px;}

Code: Alles auswählen

#menu #first a:active, #menu #first .active{
	background: #252525 url(style/bg-menu.png) no-repeat 0 -62px;
	width:103px;}