CSSデザインノート

CSS HappyLifeの平澤さんが新しいサイト「CSS HappyLife ZERO」をオープンされたのですが、そのメニュー部分がとても素敵だったので、参考に同じようなものを作ってみました。

ちなみに全くソースコードは拝見していませんので、同じようには作られてはいないと思います。

前回の記事「アクセシビリティの高いCSSロールオーバーメニュー」を参考にすれば、比較的簡単に作れそうです。

サンプル

サンプルはこちらから

動作確認

Firefox3.5.7、Google Chrome 3.0、Safari 4.0.4 for Windows XPです。IE6はhoverに対応していませんので、強調する効果は得られませんが、不具合なく表示する事はできます。Opera 10.10は正常に動作しません。なぜでしょう。「ul#menu li a」に「display:inline-block;」を追加するとちゃんと動作しました。

(X)HTMLコード

<ul id="menu">
   <li class="menu1"><a href="#" class="current"><img src="images/menu1.gif" alt="menu1" /></a></li>
   <li class="menu2"><a href="#"><img src="images/menu2.gif" alt="menu2" /></a></li>
   <li class="menu3"><a href="#"><img src="images/menu3.gif" alt="menu3" /></a></li>
   <li class="menu4"><a href="#"><img src="images/menu4.gif" alt="menu4" /></a></li>
   <li class="menu5"><a href="#"><img src="images/menu5.gif" alt="menu5" /></a></li>
</ul>

CSSコード

img {
   border:0;
}

ul#menu {
   float:left;
   margin:0;
   padding:0;
}

ul#menu:hover {
   background: url(images/bg_menu_hover.gif) no-repeat;
}

ul#menu li {
   float:left;
   margin:0;
   padding:0;
   list-style:none;
}

ul#menu li a {
   display:block;
   display:inline-block;
   width:100px;
   height:30px;
}

ul#menu li a:hover,
ul#menu li a.current {
   background-image:url(images/bg_menu_on.gif);
}

ul#menu li.menu1 a:hover,
ul#menu li.menu1 a.current {
   background-position:0 0;
}

ul#menu li.menu2 a:hover,
ul#menu li.menu2 a.current {
   background-position:-100px 0;
}

ul#menu li.menu3 a:hover,
ul#menu li.menu3 a.current {
   background-position:-200px 0;
}

ul#menu li.menu4 a:hover,
ul#menu li.menu4 a.current {
   background-position:-300px 0;
}

ul#menu li.menu5 a:hover,
ul#menu li.menu5 a.current {
   background-position:-400px 0;
}

ul#menu li img {
   position:relative;
   z-index:-1;
}

考え方としては、リスト（ul）の背景に目立たない用のリスト画像を指定し、特定のメニューにカーソルがあったときはそのメニューだけオンマウス用の画像に切り替え、他のメニューはリストの一番下に回りこませてることにより目立たない用のリスト画像が表示されるというわけです。

また、現在表示しているページのメニューも目立たせたい場合は、a要素にcurrentというクラス名をつけて、CSSのほうで個別にスタイルを指定するとよいと思います。