アクセシビリティの高いCSSロールオーバーメニュー

|

これまでロールオーバーメニューをCSSのみで作ろうとした場合、ちらつきが起こったり、画像をオフにしていたら見れなかったり、アクセシビリティが低くなってしまっていました。

しかし、ある程度これらを克服したCSSの書き方がありました!しかも非常にCSSソースコードがコンパクトになっています。

詳細は上記のブログを参考にしていただければと思います。

ポイントは画像の使い方でしょうか。 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;
}

参考サイト

CSSの小技に関する記事(53)

参考サイト

お勧めCSS教本

Powered by Movable Type 4.21-ja

最近のブログ記事