Posted: 2016.02.29 / Category: HTML&CSS / Tag: CSS3, アニメーション

横並びのナビゲーションとかでマウスオーバーしたボタンだけ横に広がって、大きくなった分だけ他のボタンが狭くなるというやつです。
ちょっと説明よくわからないですが、サンプルを用意しました。

See the Pen Flexbox Animetion Width by webopixel (@webopixel) on CodePen.

HTML

HTMLはシンプルなリストでマークアップしてます。

HTML

<nav id="main-nav">
	<ul>
		<li><a href="#">Green</a></li>
		<li><a href="#">Purple</a></li>
		<li><a href="#">Red</a></li>
		<li><a href="#">Blue</a></li>
	</ul>
</nav>

CSS

重要なとこだけ抜き出してみるとこれだけです。
flexで並べたらwidthをtransitionさせるだけですね。

CSS

#main-nav ul {
    display: -webkit-flex;
    display: flex;
}
#main-nav li {
    width: 100%;
    -webkit-transition: width 0.3s ease-out;
    transition: width 0.3s ease-out;
}
#main-nav li:hover {
    width: 200%;
}

昔はJSとか駆使してがんばらないといけなかったのが、CSS3のFlexbox使うとすごく簡単にできますね。