当サイトの右上にあるナビゲーションバーのように、カーソルを乗せると画像が切り替わるのをよく見かけると思います。今回はそのロールオーバー効果をCSSで実現する方法について簡単に書いてみたいと思います。
はじめに通常のイメージと、マウスカーソルのonの時用に２枚画像を用意するのですが、ここでまず注意しなければならないこと。
それは別々に用意するのではなく、１枚画像として用意することです。

上がデフォルトの状態で、下が選択時の状態を想定しています。
画像を別々に用意している場合、マウスオーバー時にはじめて２枚目(onの画像)の画像が読み込まれる為、タイムラグが生じて読み込む際に一瞬画像が消えてしまいます。
実際に経験したことがある人はわかると思いますが、コレがものすごく気持ち悪いです。
一つにまとめておくことで、最初のページロードで２枚目まで読み込むことができ、マウスオーバー時にCSSで表示位置を入れ替えてあげるだけで、あたかもボタンが切り替わったかのように見せることができるわけです。

HTML

<ul id="navi">
<li><a href="#">Contact Us</a></li>
</ul>

CSS

ul#navi li{
text-indent: -9999px;
overflow: hidden;
}

ul#navi li a{
display: block;
background: url(images/contact.jpg) 0 0 no-repeat;
width: 140px;
height: 40px;
}

ul#navi li a:hover{
background: url(images/contact.jpg) bottom left no-repeat;
}

ソースはこんな感じになります。

ポジションの移動はbottom left という風にしていますが、数値でも大丈夫なのでこの場合だと
0 -40px になりますね。

素材として公開するつもりで作ってなかったけど折角なので！

文字なしの140*40が一緒の画像でセットになっているので140*80です。

▲VISTA風ナビゲーションバー のダウンロードはこちら (1601)

タグ: CSS, メニュー