Daily happenings, XHTML, CSS, MT, WP, Web, a memo, etc…

CSSスプライト

CSSスプライトを使用したグローバルナビ。
画像はメニューごとに分けて作成。
「class=”current”」を指定し、カレント表示設定。

CSSスプライト

HTML

<nav id="global-nav">
<ul class="cf">
<li id="global-nav01" class="current"><a href="#">メニュー1</a></li>
<li id="global-nav02"><a href="#">メニュー2</a></li>
<li id="global-nav03"><a href="#">メニュー3</a></li>
<li id="global-nav04"><a href="#">メニュー4</a></li>
<li id="global-nav05"><a href="#">メニュー5</a></li>
</ul>
</nav>

CSS

nav#global-nav ul li {
 float: left;
}

nav#global-nav ul li a {
 display: block;
 height: 50px;
 width: 192px;
 text-indent: 100%;
 white-space: nowrap;
 overflow: hidden;
}

nav#global-nav ul li#global-nav01 a {
 background: url(../img/global_nav01.gif) no-repeat;
}

nav#global-nav ul li#global-nav02 a {
 background: url(../img/global_nav02.gif) no-repeat;
}

nav#global-nav ul li#global-nav03 a {
 background: url(../img/global_nav03.gif) no-repeat;
}

nav#global-nav ul li#global-nav04 a {
 background: url(../img/global_nav04.gif) no-repeat;
}

nav#global-nav ul li#global-nav05 a {
 background: url(../img/global_nav05.gif) no-repeat;
}

nav#global-nav ul li#global-nav01 a:hover,
nav#global-nav ul li#global-nav02 a:hover,
nav#global-nav ul li#global-nav03 a:hover,
nav#global-nav ul li#global-nav04 a:hover,
nav#global-nav ul li#global-nav05 a:hover,
nav#global-nav ul li#global-nav01.current a {
 background-position: 0 -50px;
}