ホームページ制作・大阪インフォメーションメディアデザイン

06-6809-5021

Staff Blogスタッフブログ

CSSでできるドロップダウンメニューのいろいろ

Avatar photo
髭人
2015.02.17

dropdownpng

最近はドロップダウンメニューをJSを使わずに作ることが多くなってきました。
CSS3や擬似クラスなどがでてきたということなのでしょう。
そこでいろいろなドロップダウンメニューを集めてみたました。

オーソドックスタイプ

パッと出てパッと消えるやつですね。
だいたいこれで行きます。
これだと、ブラウザをあまり選ばないのですよ。

フェードを使ったタイプ

フェードイン・アウトをするタイプ。
こちらは「transition」を使用しているのでIEの古いのはダメ。
まぁ、なんやエフェクトが入ってると大体「transition」が入ってますよね。
アニメーションするためのやつやけんね。

横から出てくる奴


これは、widthの設定だけwidth:0; から width:100%; にするだけ。
簡単やねー。

まとめ

まだまだ、探したらいっぱいあります。
今後、CSS3を多用したエフェクトやアニメーションなど、たくさん出てくると思います。
もう少ししたら、IE8が消えるみたいですし。
その頃には、IE9ではアニメーションなしでパッとでるタイプで表示し、それ以外のブラウザでは、多彩なアニメーションで表現ができ、楽しいサイトが作れるようになるかもしれませんね。

話は少し変わりますが、「JSFIDDLE」というのは使いやすくていいですね。
これからも使っていこう

それでは、また!

Avatar photo
投稿者:髭人
  • Twitter
2015.02.17 | 02:15
最近、スマホでしか、ゲームしてないなぁ。
なんか、腰を据えてゲームやりたいなぁ。