本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。
この記事は最終更新から3年以上経過しています。
CssSpriteです。サイトの読み込みを早くするときなどによくつかわれる技術ですね。
かなり今さら感がありますがたまにCssSpriteでメニューを作ろうとすると決まって忘れてしまっています。そこで今さら感全開ですが備忘録として残しておこうと思います。
htmlのソースはこんな感じ。メニューが6あるとします。
<ul id="global-nav">
<li class="nav-01"><a href="#"></a></li>
<li class="nav-02"><a href="#"></a></li>
<li class="nav-03"><a href="#"></a></li>
<li class="nav-04"><a href="#"></a></li>
<li class="nav-05"><a href="#"></a></li>
<li class="nav-06"><a href="#"></a></li>
</ul>
で、cssはこんな感じ。
/*------------------------
global nav
--------------------------*/
#global-nav {
background:url("../img/globalnav.png") no-repeat;
width: 900px;
height: 43px;
margin: 0;
padding: 0;
border: 1px solid #ccc;
}
#global-nav li, #global-nav a {
height: 43px;
display: block;
}
#global-nav li {
float: left;
list-style: none;
display: inline;
text-indent: -9999em;
}
.nav-01 { width: 150px; }
.nav-02 { width: 150px; }
.nav-03 { width: 150px; }
.nav-04 { width: 150px; }
.nav-05 { width: 150px; }
.nav-06 { width: 150px; }
.nav-01 a:hover { background:url("../img/globalnav.png") 0px -43px no-repeat; }
.nav-02 a:hover { background:url("../img/globalnav.png") -150px -43px no-repeat; }
.nav-03 a:hover { background:url("../img/globalnav.png") -300px -43px no-repeat; }
.nav-04 a:hover { background:url("../img/globalnav.png") -450px -43px no-repeat; }
.nav-05 a:hover { background:url("../img/globalnav.png") -600px -43px no-repeat; }
.nav-06 a:hover { background:url("../img/globalnav.png") -750px -43px no-repeat; }
各メニューにマウスが当たった時に背景画像を切り替えているようなのでよしとします。