画像置換を用いた横型メニュー rev.1

画像置換を用いた横型メニューについて、新しく書き直しました。 このページの内容は古いですので、新しい方を参照してください。

画像置換を用いた横型メニュー (最新版)

to-R さんのところ に似たようなサンプルがあったのですが、画像を表示しない環境で何も表示されないようなサンプルだったので、画像非表示時に文字が表示されるようなメニューを作ってみました。

画像の置換方法ですが、置換を行う要素に display: list-item; を設定し、list-style-image プロパティで置換対象の画像を指定、マーカーとして画像を表示する、という手法を採っています。 親要素のサイズを画像のサイズに合わせておくことで、元の文字はマーカー画像に押し出されて表示領域外に出て行きます。 画像が非表示設定の場合は押し出されずに文字が表示領域に残ります。

Sample

画像置換を用いた横型メニューのサンプルです。
リンクは全てこのページに向けて貼ってあります。

CSS オン、画像表示の環境なら大抵のブラウザで問題なく表示されると思います。 なお、一番右端は、画像が読み込めなかった場合の表示のサンプルとしてわざと存在しない画像ファイルを指定しています。

また、オーバーロールする画像を、背景画像として先に読み込んでおくことで、マウスを乗せたときに一瞬文字が見えることが防げます。 サンプルでは、"HOME" と "このサイトについて" は背景画像として先にロールオーバーする画像を読み込んでいるので、マウスを載せた時に文字が見えることはありません。 一方 "sample1" の方はロールオーバーする画像を読み込んでいないので、一瞬文字が見えてしまいます。 一度ロールオーバーする画像を読み込んでしまうとキャッシュに残っていると思いますので、キャッシュを削除して試してみてください。

Source Code

HTML Code

サンプルの HTML コードです。

ul 要素の下に li 要素、さらにその下に a 要素、というシンプルな構成です。 各 a 要素を CSS から参照するためにクラス名の設定を行っていますが、属性値による CSS セレクタが使えるブラウザが一般的になったら、href 属性の値で各 a 要素を参照する、という方法を採るといいかもしれません。 とりあえず現在は IE6 が居るからダメですけど(´･ω･`)

<ul id="imageReplacing">
  <li><a href="xxx.htm" class="home">HOME</a></li>
  <li><a href="xxx.htm" class="about">このサイトについて</a></li>
  <li><a href="xxx.htm" class="sample1">sample1</a></li>
  <li><a href="xxx.htm" class="sample2">画像なし sample</a></li>
</ul>

CSS Code

サンプルの CSS コードです。

border や背景色の設定を行っているのでごちゃごちゃしてますが、重要な部分は強調している部分です。それと各画像の URL の指定を行っている部分と。

ul#imageReplacing {
  overflow: hidden;
  list-style: none; width: 604px; height: 30px;
  padding: 0px; margin: 20px;
  border-color: #46251A;
  border-width: 1px 0px 3px 1px;
  border-style: solid none double solid;
}

#imageReplacing li {
  float: left; overflow: hidden;
  width: 150px; height: 30px; /* 画像の大きさ */
  border-right: 1px solid #46251A;
}

#imageReplacing li a {
  display: list-item;
  list-style: disc inside; /* none を設定すると画像も表示されなくなる. */
  background-color: #FFF1CC; color: #46251A;
  line-height: 31px; /* 画像が非表示の場合の文字の位置調節. 画像の高さより 1px 大きめに設定 */
}
#imageReplacing li a:hover { background-color: #F4EFCA; }

/* 各画像の URL 設定 */
#imageReplacing li a.home {
  list-style-image: url("ir_home.png");
  background-image: url("ir_home_active.png"); /* オーバーロールする画像を先に読み込んでおく */
  background-position: 0px -30px;
}
#imageReplacing li a.home:hover { list-style-image: url("ir_home_active.png"); }

#imageReplacing li a.about {
  list-style-image: url("ir_about.png");
  background-image: url("ir_about_active.png"); /* オーバーロールする画像を先に読み込んでおく */
  background-position: 0px -30px;
}
#imageReplacing li a.about:hover { list-style-image: url("ir_about_active.png"); }

#imageReplacing li a.sample1 { list-style-image: url("ir_sample1.png"); }
#imageReplacing li a.sample1:hover { list-style-image: url("ir_sample1_active.png"); }

/* 存在しない画像: 画像なしの sample 用 */
#imageReplacing li a.sample2 { list-style-image: url("none.png"); }
#imageReplacing li a.sample2:hover { list-style-image: url("none.png"); }

ブラウザの対応状況

Firefox 3期待通りの動作
Firefox 2期待通りの動作
Opera 9.5期待通りの動作
Safari 3期待通りの動作
IE8 beta1画像置換が行われない. 文字は表示される
IE7期待通りの動作
IE6期待通りの動作
IE5.5画像置換が行われない. 文字は表示される

モダンブラウザでは問題なく表示されます。IE6 と IE7 でもちゃんと表示されます。

問題は IE8 beta1 と IE5.5 ですね。 IE5.5 はもはやどうでもいい、と言うとあれですが、まあ IE5.5 でもちゃんと表示させたいなら IE5.5 専用の CSS を書けばいいでしょう。

IE8 beta1 は・・・Acid 2 test に合格したとか言われてますけどあんまりちゃんとした実装になってないような。 CSS の list-style-image が効かないようです。
試してみたところ display: list-item; の要素に対してだけでなく、li 要素に対しても効いていません。 標準準拠モードスイッチを書いてないせい？ というわけでもなさそうですし。 まだ beta1 なんで、多分製品版ではちゃんと期待通りに動作してくれると思います。。

'08.07.19 オーバーロールする画像を背景として読み込んで置くように CSS を変更.