DN*BLOG

CSS Sprite

サンプルメニュー

• link1
• link2
• link3

このメニューは一枚の画像で表現している。
以下からソース。

用意するメニューの画像

CSSソース

a.sampleLink01,
a.sampleLink02,
a.sampleLink03 {
	height:0;
	background:url(../img/btn_menu.jpg) no-repeat;
	display:block;
	overflow:hidden;
	padding-top:32px;
}
a.sampleLink01 {
	width:122px;
	background-position:0 0;
}
a.sampleLink02 {
	width:121px;
	background-position:-122px 0;
}
a.sampleLink03 {
	width:121px;
	background-position:-243px 0;
}
/* hover */
a.sampleLink01:hover {
	width:122px;
	background-position:0 -32px;
}
a.sampleLink02:hover {
	width:121px;
	background-position:-122px -32px;
}
a.sampleLink03:hover {
	width:121px;
	background-position:-243px -32px;
}

XHTMLソース

<ul>
	<li><a href="link1.html" class="sampleLink01">link1</a></li>
	<li><a href="link2.html" class="sampleLink02">link2</a></li>
	<li><a href="link3.html" class="sampleLink03">link3</a></li>
</ul>

これで完成。
CSSのソースコードも簡単なのでおすすめです。

Return to the page