Lifehackerで動きのあるボタンが簡単に作れる「Transformicons」というのが紹介されていたので、早速試してみました。

動きのあるボタンというのは3本線が☓に変化したりする、アレです。

試しにこのサイトの左上に仕込んでみました。

使い方は至って簡単。

まず自分で利用したいアイコンをチェックしてスライドを緑色にします。

あとは、Buildという赤いバーを押せば、CSSやHTML、Javascriptなどが出力されます。

Markupに出力されるのは、そのままボタンを表示したい位置に記述するHTMLです。

StylesはCSSですね。Sassで出力することも可能です。

JavaScriptは圧縮したバージョンと人が読める形の圧縮なしでも出力可能。通常は圧縮版でいいと思います。このJavascriptは「transformicons.js」という名前で保存しアップロードしておきます（実際には名前はなんでもいいですけど）。

ここまでは非常に簡単なのですが、この先についてはあまり具体的な説明がなく、躓く人も多いんじゃないかと思います。

一応、Documentationというページに説明があるのですが、HTMLとCSSは説明不要だと思います。

Javascriptは、下記のような感じで読み込みます。

<script src="site/js/transformicons.js"></script>
<script>transformicons.add('.tcon')</script>

これだけで、ボタンをクリックするとアニメーションが働きます。

ただ、これだとアニメーションするだけで特に何かが起きるわけではありません。ここから例えばメニューが展開したりといったことをするにはjQueryなりで別途機能を追加する必要があります。

Clickイベントでメニューを表示したり非表示にしたりするぐらいならあちこちでサンプルが見つかると思うので、たいして難しくはないのですが。

このへんの動きまで含めてコードを生成してくれると楽なんですけどねぇ、誰か作らないかな？

(via lifehacker)