アクセシビリティの高いCSSロールオーバーメニュー
これまでロールオーバーメニューをCSSのみで作ろうとした場合、ちらつきが起こったり、画像をオフにしていたら見れなかったり、アクセシビリティが低くなってしまっていました。
しかし、ある程度これらを克服したCSSの書き方がありました！しかも非常にCSSソースコードがコンパクトになっています。
ピュアCSSで実装するDKIRを応用した画像ボタンのロールオーバー効果 | CSS-EBLOG
詳細は上記のブログを参考にしていただければと思います。
ポイントは画像の使い方でしょうか。 HTMLにて<img src="" alt="" />でマウスオーバー前の画像を表示、CSSにて背景画像でマウスオーバー時の画像を配置し、マウスオーバー時に表示する範囲をbackground-positionで設定しています。
これらの画像をz-indexでレイヤーの順番を変更にする事で、重なった画像がうまく表示されるという仕組みですね。
本来display:-9999pxで画面外にとばしてしまうところですが、うまく下のレイヤーに隠すとはなかなか面白いですね。
altでメニューの代替テキストを表示することで、画像がオフだったり読み込まれないときでも一応読めます。
また、最初からマウスオーバー時の画像を読み込んでいるので、マウスオーバー時にちらつきが発生することもありません。
難点は画像を作るのが面倒ってことですかね。メニュー個別に分かれたマウスオーバー前の画像と、マウスオーバー時の全てのメニューがくっついた画像を用意しないといけないのは、少し手間がかかりますね。その分、CSSソースコードはシンプルになるのですが。
ソースコードを引用させていただきます。
(X)HTMLコード
<ul id="menu">
<li class="home"><a href="#"><img src="btn_home.png" alt="HOME" /></a></li>
<li class="product" id="current"><a href="#"><img src="btn_product.png" alt="Product" /></a></li>
<li class="about"><a href="#"><img src="btn_about.png" alt="About" /></a></li>
<li class="blog"><a href="#"><img src="btn_blog.png" alt="Blog" /></a></li>
<li class="contact"><a href="#"><img src="btn_contact.png" alt="Contact" /></a></li>
</ul>CSSコード
#menu li {
float: left;
position: relative;
z-index: 3;
}
#menu li a {
background: url(menu.png) left top no-repeat;
display: -moz-inline-box; /* Firefox2 用のスタイル */
display: inline-block;
}
#menu li.product a { background-position: -135px 0; }
#menu li.about a { background-position: -255px 0; }
#menu li.blog a { background-position: -375px 0; }
#menu li.contact a { background-position: -495px 0; }
#menu li a:hover {
position: static;
}
#menu li a:hover img ,
#menu li#current a img {
position: relative;
z-index: -1;
}
