CSSだけでアニメーションプルダウンメニューを作る

2008年8月19日 18:37

前回のエントリーに引き続き、-webkit-transitionを使ってアニメーションのCSSについて書きたいと思います。
-webkit-transitionのアニメーションについては前回の記事「CSS3はアニメーションも指定できる！」を参照ください。動画キャプチャ入りで簡単に説明してます。

今回は、-webkit-transitionを使ってアニメーションで表示されるプルダウンメニューを作ってみたいと思います。
下位階層があるメニューにマウスオーバーすると、下位階層のメニューがフェードインとともに下にスライドしながら出てくる、というものです。

とりあえず言葉で説明しても、百聞は一見にしかずなので、サンプルを見てください。以下に動画サンプルも表示してます。
（※実際のサンプルは、webkit系が実装しているCSSを使用しているので、Safariかwebkit以外で見ると、通常のプルダウンメニューになります。また、IE6では動作しません）

「CSSだけでアニメーションプルダウンメニューを作る」サンプル（Safariでご覧ください）

▼EntryMore▼

CSSソース

今回のポイントは、前回同様「-webkit-transition」です。
今回、アニメーションに使用したプロパティは「position, top, visibility, opacity」の4つ。

メニュー部分はul要素でマークアップし、下位階層のリストはul要素を入れ子にして構築。
「position: absolute」を使うため、メニュー本体のli要素に「position: relative」を指定しています。

入れ子にしたul要素に「position: absoliute」を指定し、「top: -1px; left: -1px;」を指定します。（-1pxは、li要素のborder分ずらすため）
また同時に、「opacity: 0」を指定して透明度を0にします。
ここでさらに「visibility: hidden」を設定しているのは、opacityだけだと単に透明になるだけで、li要素のマウスオーバーに反応してしまうためです。

これで下位階層のメニューの準備ができました。この状態で表示してみると、下位階層のメニューが消えて、通常のメニューだけが見えている状態になります。
本題は、下位階層のメニューがあるリンクにマウスオーバーした際にメニューをプルダウンさせることです。

プルダウンを表現しているのは以下のCSSです。

「.mainMenu > li:hover ul」によって、li要素にマウスオーバーした際に入れ子になっているul要素のスタイルを変更します。
変更内容は「top, visibility, opacity」の3つ。
マウスオーバー時にtopを1.5em、visibilityをvisible（表示）、opacityを1に変更しています。

さらに、今回の主題である「-webkit-transition」により、topの移動とopacityの透明度がアニメーションによって表示されるために、サンプルのような動作をする、というわけです。