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

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

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

[codepen_embed height=”424″ theme_id=”13407″ slug_hash=”dWvYrX” default_tab=”result” user=”sagayama”]See the Pen flex by mitsuki sagayama (@sagayama) on CodePen.[/codepen_embed]

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

html

<div class="accordion">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contant</a></li>
  </ul>
</div>

CSS

.accordion {
  width: 700px;
  margin: 1em auto;
}
.accordion ul {
  display: flex; //here
}
.accordion ul li {
  width: 100%; //here
  transition: all .5s; //here
}
.accordion ul li a {
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 1em 0;
  color: #777;
  border: 1px solid #777;
  border-left: 0;
  transition: all .5s;
}
.accordion ul li a:hover {
  background: #777;
  color: #fff;
}
.accordion ul li:hover {
  width: 200%; //here
}
.accordion ul li:first-child a {
  border-left: 1px solid #777;
}

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

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

まとめ

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

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

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