CSSで1つの画像でつくるスライドナビゲーションバー

画像は下記のような画像です。

この画像のPSD形式でのダウンロードはコチラから

デモページはコチラから

ナビゲーションメニューの中で背景画像をボタンに使用し、イメージの一部を保持するためにリストの中でリンク内の空のspanタグを使います。

XHTML

<ul class="blue">
    <li><a href="#" title="home" class="current"><span></span>home</a></li>
    <li><a href="#" title="products"><span></span>products</a></li>
    <li><a href="#" title="blog"><span></span>blog</a></li>
    <li><a href="#" title="contact"><span></span>contact</a></li>
</ul>

CSS

ul.blue {
	padding: 5px;
	margin: 10px 0;
	list-style: none;
	float: left;
}

ul.blue li {
	float: left;
}
 
ul.blue li a {
	float: left;
	text-decoration: none;
	color: #ccc;
	padding: 4px 15px 0 0;
	margin-right: 8px;
	font: 900 14px "Arial", Helvetica, sans-serif;
}

ul.blue li a span {
	float: left;
	padding-right: 15px;
	display: block;
	margin-top: -4px;
	height: 24px;
}

ul.blue li a:hover, ul.blue li a.current {
 	color: #0d5f83;
	background: url("images/blue.png") no-repeat top right;
}
 
ul.blue li a:hover span, ul.blue li a.current span {
	background: url("images/blue.png") no-repeat top left;
}