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

カテゴリ:CSSテクニック 2008年8月19日 18:37

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

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

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

実際に動いている動画サンプル

▼EntryMore▼

CSSソース

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

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

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

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

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

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

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

この記事のカテゴリー一覧を見る⇒CSSテクニック

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

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/92

トラックバック

CSS3でプルダウンメニューと可変角丸囲み

今度のCSSはとってもすごいらしい。rなんと、今までFlashでしか実現できなかったアニメーションによるプルダウンメニューができるらしいのだ。r□CS...

by地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記 2008年9月16日 23:20