画像置換でメニューを作る

このエントリーをはてなブックマークに追加

画像置換を使えばロールオーバーの実装を(javascriptを知らない)デザイナーでも簡単に実装することが可能になります。

ただし、複雑なメニューの場合、整理して書かないと後で大変なことになります。

今回は要点を説明しながらメニューを作って行きたいと思います。

ひとまず、完成系のサンプルに目を通しておいてください。

ベースとなる(X)HTMLソースは以下のようにします。

<ul>
	<li class="ajaBtn"><a href="/ajax/">Ajax</a></li>
	<li class="amaBtn"><a href="/amazon/">amazon</a></li>
	<li class="cssBtn"><a href="/css/">css</a></li>
	<li class="htmBtn"><a href="/html/">html</a></li>
</ul>

メニューなのでリスト型要素であるul要素でマークアップします。

後で項目毎に画像を切り替える為、li要素にはそれぞれクラス名を付けています。

クラス名ですがそれぞれに『ajaxBtn』や『amazonBtn』などの、長さの違うクラス名を設定すると、後々視覚的にとても見にくくなります。多少、意味が通じなくても同じ長さのクラス名を付けると見やすいです。
また、『TopA』『TopB』『TopC』や『btn1』『btn2』『btn3』などの通し番号でクラス名を変えているサイトも良く見かけますが、並び順の変更があった場合に、ややこしくなるので止めておいた方がよいでしょう。

次にCSSですが

li{
	list-style-type:none;
	width:150px;
	height:50px;
	float:left;
}
a{
	display:block;
	height:100%;
	text-indent:-9999px;
}

ひとまずすべてのli要素とa要素に共通の設定を適応させます。

個別に設定していたのでは、変更の際に全部書き換えなくてはいけないので、共通で設定できるものはまとめて記述しましょう。

li要素のfloat:leftを設定していますが、これはメニューを横に並べる為です。
縦に並べる場合は必要ありません。

a要素のサイズもliで設定しているもとの同じにする為、height:100%だけ設定しましょう。

a:focus{
/**/
	overflow: hidden;
/**/
}

画像置換を行った際に、Firefoxでは、リンクをクリックした際に点線が画面外まで出ます。
画像置換のリンク点線を使い、リンクの点線を消します。

li.ajaBtn{
	background:url(./ajax_b.gif);
}
li.ajaBtn a{
	background:url(./ajax_a.gif);
}
li.amaBtn{
	background:url(./amazon_b.gif);
}
li.amaBtn a{
	background:url(./amazon_a.gif);
}
li.cssBtn{
	background:url(./css_b.gif);
}
li.cssBtn a{
	background:url(./css_a.gif);
}
li.htmBtn{
	background:url(./html_b.gif);
}
li.htmBtn a{
	background:url(./html_a.gif);
}

cssで画像をプリロードを行う為、a要素を包容しているli要素にロールオーバー時の画像を設定して、a要素に表示する画像を設定します。

li a:hover{
	background:none !important;
}

a要素のhover擬似クラスにbackground:noneを記述しても、classを持つli要素の子孫セレクタとして設定されているa要素(つまり、ふつうに画像を表示しているCSS)の方がカスケーディングの順位が高くなります。

その為、!importantを指定してカスケーディングの順位を強制的にあげることにより、a要素のhover擬似クラスの設定をすべてのa要素に反映させることができます。

サンプル

この記述方法は、いかにして効率よく記述を行うか、メンテナンス性を上げるかに重点をおいてますので、参考になればと思います。

スポンサードリンク