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)

タグ: , , ,

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

BIGLOBEのエンタメフリーオプション、2月にも対象サービスが追加される予定

BIGLOBEが提供しているYoutubeやAbemaTVなどのデータ通信がカウントされない「エンタメフリー・オプション」ですが、2月中にも対象サービスが追加されるようです。 エンタメフリーオプション

格安SIMを利用しているスマートフォンはiPhone 5Sが最多 MMD研究所主催の勉強会で格安SIMの最新動向を聞いてきた

MMD研究所主催のMVNO勉強会「2016年の振り返りと2017年に向けて」に参加してきました。 この勉強会、今回が第4回目ということですが、私は今回が初参加。 「報道メディア、ライター向けの勉強会」

AUKEY、日替わりで対象製品が半額になる「当日だけのお買い得」キャンペーン、対象製品が最大79%オフの「2017新春セール」を開催

AUKEYが1月23日~2月6日の間、日替わりで対象製品を半額で購入できるというキャンペーン、そして1月23日~2月1日には「2017新春セール」として対象製品が最大79%オフになるキャンペーンを実施

Android 7.0 Nougatではタスクボタンのダブルタップで直前に表示していたアプリに切り替え可能

Android 7.0 / 7.1 Nougatでは以前にも紹介したマルチウィンドウ機能やイースターエッグなど、存在がわからない機能があるのですが、そんな中の一つにタスクボタン(マルチタスクボタン)の

1月27日発売のFREETEL RAIJIN(雷神)、Amazonで約3,000円安く予約受付中

FREETELの最新機種、RAIJIN(雷神)が1月27日(金)に発売となります。 大容量バッテリを搭載したFREETEL RAIJIN(雷神) 5.5インチの大画面にバッテリは5,000mAhという

Android 7.0 Nougatではタスクボタンのダブルタップで直前に表示していたアプリに切り替え可能

Android 7.0 Nougatではタスクボタンのダブルタップで直前に表示していたアプリに切り替え可能

Android 7.0 / 7.1 Nougatでは以前にも紹介したマルチウィンドウ機能やイースターエッグなど、存在がわからない機能があるのですが、そんな中の一つにタスクボタン(マルチタスクボタン...

スマホの画面をテレビに出力できるMiracast(ミラキャスト)の使い方

スマホの画面をテレビに出力できるMiracast(ミラキャスト)の使い方

名前だけは聞いたことはあるものの、使っている、活用しているという話をあまり聞かないMiracast(ミラキャスト)、どんなものかと思って実際に使ってみました。 ...

AUKEY、日替わりで対象製品が半額になる「当日だけのお買い得」キャンペーン、対象製品が最大79%オフの「2017新春セール」を開催

AUKEY、日替わりで対象製品が半額になる「当日だけのお買い得」キャンペーン、対象製品が最大79%オフの「2017新春セール」を開催

AUKEYが1月23日~2月6日の間、日替わりで対象製品を半額で購入できるというキャンペーン、そして1月23日~2月1日には「2017新春セール」として対象製品が最大79%オフになるキャンペーンを...

FREETEL、299円の全プラン対応パックに3か月間データ容量が増量されるAmazonプライム会員限定プランを提供中 ただし価格は322円

FREETEL、299円の全プラン対応パックに3か月間データ容量が増量されるAmazonプライム会員限定プランを提供中 ただし価格は322円

最近、ドコモからの費用増に伴い、初期費用の値上げが行われているMVNO(格安SIM)ですが、そんな中でもダントツに安い初期費用299円で提供しているFREETELの全プラン対応パック。 その全プ...

1月27日発売のFREETEL RAIJIN(雷神)、Amazonで約3,000円安く予約受付中

1月27日発売のFREETEL RAIJIN(雷神)、Amazonで約3,000円安く予約受付中

FREETELの最新機種、RAIJIN(雷神)が1月27日(金)に発売となります。 大容量バッテリを搭載したFREETEL RAIJIN(雷神) 5.5インチの大画面にバッテリは5,000mA...

MENU

back to top