Hello, CSS3 Dropdown Menu! - 実装のポイント

CSS3 Dropdown Menuがどのような実装になっているかを追いかけてみよう。

グラデーション画像の利用

CSS3にはグラデーション機能があるが、まだ一部のWebブラウザでしかサポートされていない。そこでCSS3 Dropdown Menuでは1pxの白色透過画像を用意し、backgroundに指定している。使用する上下位置を変更することで、グラデーションの強さを変えることも可能だ。

M@CSS3 Dropdown Menu - One Gradient Image is Usedより引用

最初に表示されるメニュー

CSS Dropdown Menuは<ul><li><a>の3要素から構成されている。一番最初に表示されるリストメニューは<li>要素にfloat: left;を指定して横並びにしたものだ。

最初のメニューはfloat: left;を使って横並びにレンダリングされるように

position: relative;は次の階層のメニュー表示位置用。list-style: none;でリストの黒丸を非表示にしている。

また#nav li:hover > aでカーソルが乗ったときのスタイルを定義している。ここではCSS3の機能のひとつ、影(box-shadow)を指定している。-webkit-box-shadowはSafari/Chrome向けの指定、-moz-box-shadowはFirefox向けの指定、box-shadowはOpera向けの指定だ。

1番目のメニューでカーソルが乗ったときのスタイル。主要Webブラウザすべてで影がレンダリングされるように、それぞれにbox-shadowを指定している

2番目以降に表示されるメニュー

2番目以降に表示されるリストメニューは親要素にマウスが乗ったときにはじめて表示させる必要がある。そこで#nav ulにdisplay: noneを指定し、あらかじめこれらをレンダリングされないようにしておく。カーソルが乗った(#nav li:hover > ul)段階でdisplay: blockとし、はじめて次階層のリストメニューを表示させる。

2番目以降のリストメニューはdisplay: none;とし、最初はレンダリングされないように。親要素にカーソルが乗った段階ではじめて表示される

角丸の指定について

CSS3 Dropdown Menuでは角丸(border-radius)を多用しているが、この指定方法にも一工夫されている。2番目以降に表示されるメニューでは、最初と最後の要素にのみ、適切な角丸となるように指定をしている。

最初の要素は左上と右上が、最後の要素は左下と右下が角丸となるように指定している

JavaScriptを使わず、CSS3を使ったきれいなドロップダウンメニューの実装方法。紹介されているCSSもきれいにまとまっており、CSS3の使い方のほか、セレクタの使い方のお手本にもなる。サンプルコードをベースに、いろいろな実装をしてみたいところだ。