CSSのみでロールオーバー効果のメニューを作る
3年くらい前（2006年頃）までは、メニューのロールオーバーにCSSを使うことがトレンドでした。しかしながら、テキストを画面外に飛ばし代替画像を表示する手法（画像置換法）のため、スパム行為に抵触するんじゃないかとの懸念から現在ではあまり使われなくなりました。
現在ではCSSの代わりにJavascriptを使用しているところが多いと思います。AJAX（エイジャックス:JavaScriptのHTTP通信機能を利用して非同期通信をするもの）の流行からJavascriptが脚光を浴び、「jQuery」や「Prototype」といったライブラリが登場し、多くのところからロールオーバー機能のついたライブラリが公開されています。
JavascriptもブラウザのほうでOFFにしていたら無効になるわけで、CSSもJavascriptも一長一短なところがあるのが現状です。
さて本題ですが、このロールオーバーの手法は、テキストにリンクがはってあることが条件になります。
サンプル
(X)HTMLコード
<ul class="menu">
<li class="menu1"><a href="">メニュー1</a></li>
<li class="menu2"><a href="">メニュー2</a></li>
<li class="menu3"><a href="">メニュー3</a></li>
</ul>CSSコード
ul.menu {
margin:0;
padding:0;
}
ul.menu li {
float:left;
text-indent:-9999px;
overflow:hidden;
list-style:none;
}
ul.menu li a {
display:block;
width:150px;
height:30px;
}
li.menu1 a:link {
background-image:url(menu01.gif);
}
li.menu1 a:hover {
background-image:url(menu01_on.gif);
}
li.menu2 a {
background-image:url(menu02.gif);
}
li.menu2 a:hover {
background-image:url(menu02_on.gif);
}
li.menu3 a {
background-image:url(menu03.gif);
}
li.menu3 a:hover {
background-image:url(menu03_on.gif) ;
}
/* モダンブラウザ（Firefox Opera Safari）対策 */
ul.menu:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
font-size:0;
}
/* Win版IE7とMac版IE5対策 */
ul.menu {
display:inline-block;
}
/* Win版IE5および6対策 */
/* Hides from IE-mac \*/
* html ul.menu {
height:1px;
}
ul.menu {
display:block;
}
/* End hide from IE-mac */メニューを横並びにするのにfloatを使用している都合上、リスト以降の要素の回り込みを解除するためにclearfixハックを使っています。
CSSの読み込みの遅さを防ぐ
今回説明した方法だと、オンマウスにした瞬間ちらつきが発生します。その後は画像がキャッシュされるためちらつきは発生しなくなります。この問題を解決する手としては、オンとオフの画像をくっつけて作成し、部分的に呼び出す方法があるのですが、また別の機会に紹介します。
ちらつきのないCSSロールオーバーメニューを作る - CSSデザインノート
また、IE6などだとブラウザの設定によって毎回ページのキャッシュを取得するため、マウスを置いた際画像の読み込みが遅く、ちらついてしまう現象が起きます。この現象はFirefoxなどのほかのブラウザでは起こりません。
IE6対策に以下のコードをCSSファイルに記述します。
CSSコード
html {
filter: expression(document.execCommand("BackgroundImageCache",
false, true));
}これは、CSSファイル中にJavascriptコードを書いているのですが、IEの独自の書き方です。他のブラウザでは無視されるのでハックの必要はありません。背景画像をキャッシュしています。
Javascriptでメニューのロールオーバーをしたいときは
本サイトの趣向とは違いますが、Javascriptでメニューのロールオーバーができるライブラリをいくつか紹介します。
