3本線がXになったりする、動きのあるボタンを生成できるTransformiconでサイトメニューを作ってみた

2015.2.22 (更新日:2016.03.02)
Transformicons

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

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

Dream_Seed

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

Transformicons_Builder

使い方は至って簡単。

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

Transformicons_Builder 2

あとは、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)

タグ: , , ,

この記事が気に入ったらフォロー・購読をお願いします

最新情報をお届けします

レビュー >その他

実写版「美女と野獣」、王子さまは野獣のほうがイケメンな気が・・・

4月21日から公開されているディズニー映画「美女と野獣」を観てきました。実は原作、アニメを含め、美女と野獣を観るのはこれが初めて。周りはカップルや女性ばかりだったので、実はおっさんが1人で見る映画ではないのかもしれません ...

News >モバイル

HTC、5月16日のフラッグシップ発表会の告知サイトを日本でもオープン。ライブストリーミングで配信予定

先日、紹介したHTCの発表会予告ですが、HTC Japanもライブ配信を行うということで特設ページをオープンしました。 関連:HTC、側面にセンサを搭載するHTC Uを5月16日に発表。 – Dream Seed 「かつ ...

News >モバイル

iPhoneをマッキントッシュ風にするスタンド「W4 STAND」。ただしそれ以上の機能はありません。

Apple Watchを初代マッキントッシュ風にする充電スタンド「W3 STAND」を発売しているelagoが、今度はiPhoneをクラシカルなマッキントッシュ風にするスタンド「M4 Stand」を発表しました。 シリコ ...

雑記

使ってみた? Android 7.0のGalaxy S7 edgeで利用できる「セキュリティフォルダ」

先月から開始されている国内Galaxy S7 edge向けのAndroid 7.0へのアップデート。そのアップデートにより「セキュリティフォルダ」という新しい機能が利用可能になっています。 プライベートなデータを守る「セ ...

Amazon、最大3000円オフになる「IIJmio × SIMフリースマホ セット割特集」開催中

Amazonで格安SIMとSIMフリースマートフォンのセットが最大で3000円割引になる「【最大3,000円OFF】IIJmio × SIMフリースマホ セット割特集」を開催しています。SIMはIIJmioとBIC SI ...

MENU

back to top