カテゴリー:CSSだけでアクションを作る

リスト表示へ

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

2008年8月19日 18:37

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

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

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

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

CSS3はアニメーションも指定できる!

2008年8月10日 00:34

すみません、プロパティの名前が一部間違っていました。-webkit-transition-propaty と書いていたのは正確には-webkit-transition-propertyです。

先日、CSS Reloaded というイベントに参加してきました。
そこでは CSS3 の可能性を示唆していました。

内容としてはとても刺激的で、将来、現在ある JavaScript ライブラリのほとんどが必要なくなるのではないかと思わせるほどでした。

ただ問題点として、対応ブラウザが webkit 系(Safari、Google Chromeなど)しかないこと。
また、正式に CSS3 として勧告されているわけではないこと(今 Safari でできることが実装されない可能性)。
などがあります。
ただそれでも、ぜひ実装してほしいと強く願うほど、とてもすばらしいプロパティがありました。

ということで今回は、あまり実用性はないものの、この感動を知ってもらいたいということから、CSS3 について書きたいと思います。
ちなみに、これから書く内容は、上でも書いた通り Safari でしか実行できないため、サンプルを見る際には Safari で見てください。(Safari のダウンロードはこちらから

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

CSSのみでアコーディオンメニューを実現する

2008年2月18日 00:49

前回のエントリー「:target擬似クラスを使ったプルダウンメニュー」とややかぶる気がするけど、若干違う感じなので勘弁、ってことでwn

この:target、使い方によってはonclickなどのjavascriptの代替としてかなり使えそうな予感。
しかも、物によってはページ内リンクとして動くので戻るを使って戻っても、移動する前と同じように見えたり、外部からも直接ページ内リンクも含めてリンクすることで見た瞬間にその項目を表示しておく、といった使い方もできそう。n

さて、今回のサンプルはアコーディオンメニューです。
今まではjavascriptなどで実現していたものを、CSSのみで実現してしまおう、というのが今回の趣旨です。n

CSSのみでアコーディオンメニューを実現するデモ

:target擬似クラスを使ったプルダウンメニュー

2008年2月15日 11:33

RedLine MagazineさんのCSS3 :target擬似クラスでイメージギャラリーを見て、ふと思いついたのでサンプルを作ってみた。n

:target擬似クラスを使ったプルダウンメニューデモ

内容は、:target 擬似クラスを使った、windows のメニューバーのようにクリックしたらメニューが現れるタイプのメニュー。
それを、JavaScript なしで CSS のみでやってしまおう、というのが今回の主旨。n

CSSのみでプルダウンメニューを作る

2007年11月30日 09:42

※追記[2010/01/29]
CSS のみで、かつハックやコメントを使わずにクリーンな状態でプルダウンを実装できるテクニックの紹介記事を書きました。
2 階層以降が作れない、などのデメリットもありますが、クリックしてプルダウンを固定することもできるので場合によってはとてもオススメのテクニックです。
ハックやJavaScriptを使わず、クリーンHTMLでIE6にも対応したプルダウンメニュー

※追記[2008/09/25]
説明に表示していたHTMLに誤りがあったため、修正しました。

以前にふたつほどプルダウンメニューについて書きました。

でも、上記エントリーは IE 対策として JavaScript を併用したものでした。
が、なんと CSS のみでも IE6 にまで対応したプルダウンメニューが実現できるとのことで、ちょっとサンプルを作ってみたのでアップしてみたり。

ユウさんに指摘されて、縦バージョンのサンプルも作成してみました。

CSSのみでプルダウンメニューを作るデモ

なぜ CSS のみで実現できるのか理由までは分かっていませんが、これで動く、というところまで紹介したいと思います。

CSSのみでタスクバー風メニュー

2007年11月27日 12:31

なんとなく思い立って、CSS のみでタスクバー風メニューを作ってみました。
(どちらかというとスタートメニューか)n

※ IE7 の場合、DOCTYPE を宣言しないと position:fiexd が効かないみたいでした・・。ので、それを追加したので IE7 でも同様に動作するようになっています。
※ Firefox2、Safari3、Opera9 で動作確認してます。それ以外では position:fixed がうまく動かない模様・・。
そのため、IE6 、7は挙動を少し変えてます。n

CSSのみでタスクバー風メニューデモ

サンプルページの下の方にちょこっとある白い部分にマウスオーバーするとタスクバーのように現れます。
▼肝の CSS はこんな感じです。n

CSSだけでポップアップヘルプを実現する

2006年7月 5日 01:25

今回は、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
↑サーバ解約したため、サンプルが消えてしまいました(;´д`)
時間をみて再アップします・・・。n

前の10件 1  2