SVGとCSSを使用したアニメーション3本ラインのメニューボタン「Transformicons」

  • 02/7//2015
  • CSS
Transformicons_mv

スマートフォンサイトのメニューボタンとして用いられることの多い3本ラインのメニューボタン(ハンバーガーボタンまたは、ナビゲーションドロワーが正式名称みたいです)。最近では、PCサイトでも採用されるパターンを見かけるようになってきました。

また3本ラインのメニューボタンにアニメーションを付けることによって、3本→Xマークに切り替えるようなアニメーションを取り入れる素敵なサイトも増えてきました◎

今回はその3本ラインのメニューにSVGとCSSを使用したアニメーションを付加することができるライブラリをご紹介します。

アニメーション3本ラインのメニューボタン「Transformicons」

Transformicons 01

DEMO

メニューボタンだけではなく、グリッドボタン、プラスボタン、再生ボタン、など様々なパターンもあります。アイディアの1つとして見ているだけでも十分参考になります。

実装する機会があったら参考にしたいです。

サポートブラウザ

It supports E10+, Chrome 36+, Safari 6+, Firefox 30+, Opera 22+, iOS 7+, Android 4+, Chrome for Android 38+