横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現

2006年10月 9日（月）
CSSテンプレート, ビジュアル・小技

かなり色んなサイトで見かけるようになった、JavaScriptを使わずにロールオーバーをCSSのみで実現するテクニック、そのやり方です。

以前のエントリーで、縦並びのメニューで同様のを紹介しましたが、横並びのメニューは随分勝手が違います。
またメニューをテキストではなく、画像で行っているのでその部分についても説明していきます。

サンプル：

サンプルページを見る

ダウンロード：

サンプルをダウンロード

使用画像

では、やり方をば、、、

まずはロールオーバー用の画像を用意します。
今回使用してる画像は上記の2枚のみです。

また、メニューの背景画像として、全てがオフの状態の画像を用意しています。
コレは、サーバーや回線の都合でたまに読み込みが遅れて、メニュー部分が真っ白になってしまうのを防ぐ為です。
必要無いといえば無いですが、結構気になっちゃうので（ボクは）背景を指定しています。

続いて、htmlにメニュー部分の要素を記述。

<div id="g_navi">
<ul>
<li class="g_navi01_on"><a href="./index.html" title="ホーム">home</a></li>
<li class="g_navi02"><a href="./index.html" title="アバウト">about</a></li>
<li class="g_navi03"><a href="./index.html" title="素材">material</a></li>
<li class="g_navi04"><a href="./index.html" title="ギャラリー">gallery</a></li>
<li class="g_navi05"><a href="./index.html" title="掲示板">bbs</a></li>
<li class="g_navi06"><a href="./index.html" title="ブログ">blog</a></li>
<li class="g_navi07"><a href="./index.html" title="プロフィール">profile</a></li>
<li class="g_navi08"><a href="./index.html" title="リンク">link</a></li>
</ul>
</div><!--g_navi END-->

↑って感じで。
各li要素にclassを指定します。
a要素でもダイジョブだと思いますが、今回はli要素で。

サンプルのclass名で連番使ってますが、class名等は出来るだけソレがナニを示しているのか分かるようにつけて上げてください。
サンプルだったら、g_navi_homeとか。

そして、現在のページのメニュー部分だけ色を変えているので、そのページ部分には_onをつけて色が変わるよう指定してます。

また、あくまでも背景としているので、当然ですがalt属性は使えません。
その為title属性を指定しましょう。
親切設計＋SEO的な面、アクセシビリティ面にも有利になるんで、心なしか面倒って以外一切の損はありません。

さらに続いて、スタイルシート。

該当部分だけ抜き出しても長くなっちゃうので、主要部分だけ抜き出します。

/* -+-+-+-+-+- Global Navi Style */
#g_navi {
 height:64px;
 background:url(img/g_navi_bg.gif) no-repeat;
 margin:0 0 0 8px;
}
#g_navi ul {
 padding:6px 0 0 6px;
}
#g_navi li {
 display:inline;
 list-style-type:none;
}
#g_navi li a {
 height:53px;
 display:block;
 float:left;
 text-indent:-9877em;
 text-decoration:none;
 overflow:hidden;
}
/*------off*/
#g_navi li.g_navi01 a {
 background:url(img/g_navi.gif) no-repeat;
 width:83px;
}
/*------hover*/
#g_navi li.g_navi01 a:hover {
 background:url(img/g_navi.gif) no-repeat 0px -106px;
}
/*------on*/
#g_navi li.g_navi01_on a {
 background:url(img/g_navi.gif) no-repeat 0px -53px;
 width:83px;
}

メニューを囲っている、divにメニューの背景画像を指定します。...が、最初に指定すると作業中微妙に分かり難くなってしまうので、最初は消しておいた方が良いかも知れません。

リストのマークが表示されないように、li要素に、
list-style-type:none;
を指定します。IEは指定しなくても見えなくなりますが、ソレ以外だとちゃんと出てるので必ず消します。
また、リストは本来block要素ですので、inline要素に変えてあげます。（IE対策）
display:inline;
これは、float:leftでもOKです。

続いて、一番厄介だと思われるa要素の指定。
まずは共通の指定を最初にします。

height:53px;　→画像の高さ
display:block;　→インライン要素からブロック要素へ変更
float:left;　→横並びにする為に、float:leftで左に。
text-indent:-9877em;　→テキストを画面外に飛ばす。
text-decoration:none;　→リンクの下線を消す（ネスケとかで出ちゃうので）
overflow:hidden;　→リンクの破線が画面外に飛び出すのを防止する（FireFox対策）

overflow:hiddenは、MacIE5.xだと、何だか素敵なことになっちゃうので、ホーリーハック等で、

/*\*//*/
 overflow:auto;
/**/

と指定して上げると解消できます。
そして、各メニュー用のスタイルを指定します。

#g_navi li.g_navi01 a {
 background:url(img/g_navi.gif) no-repeat;
 width:83px;
}

ホームの通常時の背景は左上なので位置の指定はなし。
続いて画像幅に合わせてwidthを指定します。

次に、カーソルオン時の画像を指定。

#g_navi li.g_navi01 a:hover {
 background:url(img/g_navi.gif) no-repeat 0px -106px;
}

一枚画像を、カーソルオン時に上に-106px分移動させる事でロールオーバーを実現してます。

一枚で行う必要は、画像が一枚で済むのでpsd等からのカットが楽っていうのと、管理が楽、最初に読み込んでしまえばその後読み込む必要性が無いからですが、部分的にメニュー変更が多い場合逆に面倒になったりするので、使用状況に合わせて一枚にするか別々にするか決めると良いと思います。

最後に、アクティブページを示すためのスタイルを指定します。

#g_navi li.g_navi01_on a {
 background:url(img/g_navi.gif) no-repeat 0px -53px;
 width:83px;
}

サンプルだと画像真ん中がソレに該当するので、高さ分-53pxを指定。

後は、次々と隣のメニューもスタイルを指定していきます。

#g_navi li.g_navi02 a {
 background:url(img/g_navi.gif) no-repeat -83px 0px;
 width:91px;
}
#g_navi li.g_navi03 a {
 background:url(img/g_navi.gif) no-repeat -174px 0px;
 width:112px;
}

↑こんな感じで。
画像の幅が一定じゃないと、横にずらす分の計算が面倒っていう罠があるので、今回のようなメニューはメニュー分だけ画像切るのが得策だと思います。

長くなってしまいましたが、コレで出来上がりです。

再度サンプルをば。

最後に。
text-indentでテキストを画面外に飛ばすのは、画像非表示の環境で情報が伝わらないとか、SEO的にどうなんだ？と色々言われている部分ですので、その辺は色々ググって調べ、理解した上で使うのが良いと思います。

横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現

サンプル：

ダウンロード：

使用画像

サンプル：

ダウンロード：

使用画像

Track Back [1]

CSSのみで画像のロールオーバー（その1）