前回のエントリーに引き続き、-webkit-transitionを使ってアニメーションのCSSについて書きたいと思います。
-webkit-transitionのアニメーションについては前回の記事「CSS3はアニメーションも指定できる！」を参照ください。動画キャプチャ入りで簡単に説明してます。
今回は、-webkit-transitionを使ってアニメーションで表示されるプルダウンメニューを作ってみたいと思います。
下位階層があるメニューにマウスオーバーすると、下位階層のメニューがフェードインとともに下にスライドしながら出てくる、というものです。
とりあえず言葉で説明しても、百聞は一見にしかずなので、サンプルを見てください。以下に動画サンプルも表示してます。
（※実際のサンプルは、webkit系が実装しているCSSを使用しているので、Safariかwebkit以外で見ると、通常のプルダウンメニューになります。また、IE6では動作しません）
「CSSだけでアニメーションプルダウンメニューを作る」サンプル（Safariでご覧ください）
先日、CSS Reloadedというイベントに参加してきました。
そこではCSS3の可能性を示唆していました。
内容としてはとても刺激的で、将来、現在あるJavascriptライブラリのほとんどが必要なくなるのではないかと思わせるほどでした。
ただ問題点として、対応ブラウザがwebkit系（Safari）しかないこと。
また、正式にCSS3として勧告されているわけではないこと（今Safariでできることが実装されない可能性）。
などがあります。
ただそれでも、ぜひ実装してほしいと強く願うほど、とてもすばらしいプロパティがありました。
ということで今回は、あまり実用性はないものの、この感動を知ってもらいたいということから、CSS3について書きたいと思います。
ちなみに、これから書く内容は、上でも書いた通りSafariでしか実行できないため、サンプルを見る際にはSafariで見てください。（Safariのダウンロードはこちらから）
↓実際に動いているところを動画でキャプチャしたところ。
RedLine MagazineさんのCSS3 :target擬似クラスでイメージギャラリーを見て、ふと思いついたのでサンプルを作ってみた。
▼サンプルはこちら
:target擬似クラスを使ったプルダウンメニューサンプル
内容は、:target擬似クラスを使った、windowsのメニューバーのようにクリックしたらメニューが現れるタイプのメニュー。
それを、JavascriptなしでCSSのみでやってしまおう、というのが今回の主旨。
※追記[2008/09/25]
説明に表示していたHTMLに誤りがあったため、修正しました。
以前にふたつほどプルダウンメニューについて書きました。
▼参考エントリー
なぜCSSのみで実現できるのか理由までは分かっていませんが、これで動く、というところまで紹介したいと思います。
今回は、CSSのみを使ってポップアップヘルプを実現してみました。
どんなものかというと、特定の語句に説明をつける際、
ポイントしたときにヘルプ表示がポップアップで出てくるようなのを
見かけたことはありませんか？
あれを、javascriptを使わずに、しかも使い回しができるように
CSSで作成してみました。
サンプルはこちら↓
http://www.green.dti.ne.jp/edo/web-test/test10/
CSSはこちら↓
http://www.green.dti.ne.jp/edo/web-test/test10/index.css
↑サーバ解約したため、サンプルが消えてしまいました(；´д｀)
時間をみて再アップします・・・。
©2008 CSS-EBLOG. All Rights Reserved
