画像ひとつのロールオーバーメニュー

「実践Web Standards Design」のp.348に『背景画像を利用したロールオーバー効果』というのがあります。p.349のコラムにもあるように、画面外に画像を飛ばす方法よりも綺麗なやり方だと思います。リストを使ったメニューはロールオーバー効果をよく使うし画像も複数要るのでこの方法が便利そうなので、横置きのメニューを作ってみました。

最初はli要素をインラインにして、li子孫のa要素をブロック化すればいいか～と考えていましたが上手くいかなかったのでli要素はポジショニングを使って配置しました。

画像

タブメニュー用画像

全体が400x50pxでひとつのタブが100x25pxとしています。上段が非選択、下段がロールオーバー画像用。

動作サンプル

HTML


<ul id="tabmenu">
<li class="tab1"><a href="http://example.com/" title="example">
<span class="tab">example</span></a></li>
<li class="tab2"><a href="http://example.com/" title="example">
<span class="tab">example</span></a></li>
<li class="tab3"><a href="http://example.com/" title="example">
<span class="tab">example</span></a></li>
<li class="tab4"><a href="http://example.com/" title="example">
<span class="tab">example</span></a></li>
</ul>

CSS無効ではテキストのメニューが出るように、ソースではリンクのテキストをspan要素で囲ってCSSで不可視にしています。しかしこれspanなしでもできるような気がします。いい方法がないでしょうか･･(text-indentではない方法で)

CSS


ul#tabmenu {
width: 400px;
height: 25px;
line-height: 0;
position: relative;
}
ul#tabmenu li {
list-style-type: none;
}
ul#tabmenu li a {
width: 100px;
height: 25px;
display: block;
text-decoration: none;
}
/* 非選択時 */
li.tab1 a {
background: url("./images/tabmenu_test.png") 0 0 no-repeat;
position: absolute;
top: 0;
left: 0;
}
li.tab2 a {
background: url("./images/tabmenu_test.png") -100px 0 no-repeat;
top: 0;
left: 100px;
position: absolute;
}
li.tab3 a {
background: url("./images/tabmenu_test.png") -200px 0 no-repeat;
position: absolute;
top: 0;
left: 200px;
}
li.tab4 a {
background: url("./images/tabmenu_test.png") -300px 0 no-repeat;
position:absolute;
top:0;
left:300px;
}
/* マウスオーバー時*/
li.tab1 a:hover {
background: url("./images/tabmenu_test.png")  0 -25px no-repeat;
}
li.tab2 a:hover {
background: url("./images/tabmenu_test.png")  -100px -25px no-repeat;
}
li.tab3 a:hover {
background: url("./images/tabmenu_test.png")  -200px -25px no-repeat;
}
li.tab4 a:hover {
background: url("./images/tabmenu_test.png")  -300px -25px no-repeat;
}
/* テキストを隠す*/
span.tab {
visibility: hidden;
}

画像1枚なので管理が楽になるかもしれないですね。このメニューはシンプルな絵なのでピクセルの指定が適当でも気になりませんが、画像を凝る場合はきっちり指定しないとズレたロールオーバーになります。

in Note