[CSS3]CSSだけでアコーデオンっぽいメニューを作ってみたよ!

CSSだけでアコーデオンっぽいメニューを作ってみたよ!

サイトのグローバルメニューをおもしろくしてみたい!
動きがあったほうがおもしろいんじゃね?

というわけで作ってみました。

See the Pen flex by mitsuki sagayama (@sagayama) on CodePen.13407

Codepenでは分からづらい方のために抜粋します。

html

CSS

とこんな感じです。
CSSは適当に変更してみてください。

コメントの「//here」さえ消さなければ基本的な動きはすると思います。←適当

まとめ

Can I use…を見てみると display:flex; はEdgeを含め現行のモダンブラウザでは問題なく利用できるようです。

Can I use…

Flexboxは要素を横並びにできるだけじゃなく、高さも揃えてくれるのでグローバルメニューのデザインに向いているじゃないかと勝手に思ってます。

ただIE8~9が対応してないので、この辺をどう考えるかですね。
調べてみたところ、IE対策のために「flexibility.js」という便利なものもあるようなので試してみるのもいいかも。←他人まかせ

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク