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)

タグ: , , ,

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

最新情報をお届けします

Googleマップで自分の場所をリアルタイムに共有できるように

Googleマップに自分のいる場所をシェアできる機能が追加されます。 これまでは自分の居場所を他の人に知らせるときには、近くのお店の住所なり座標なりをメールなどで共有するという方法がありましたが、これ

Bitdefender BOXの実機レビュー 今後はこの手の製品が各家庭に必須となるかも【AD】

先日からモニターしているBitdefender BOXですが、今回は設定方法と実際の使用感についてレビューしたいと思います。 関連:パソコンだけではダメ、重要なのはスマート家電などIoT機器のセキュリ

HUAWEI nova liteの安いけどおススメのケース ケースで迷ってたらとりあえず買って損はしない

現在一押しのミドルクラス端末、HUAWEI nova liteのケースを購入してみました。 買ったのは、NILLKINというブランドのケース。 TopAce Huawei Nova Lite 専用ケー

ウェアラブル翻訳機「ili」を持って台湾に行こう! ログバーがiliのモニターを募集中

話した言葉を瞬時に翻訳してくれる旅行に特化したウェアラブル翻訳機「ili」が、モニターを募集をしています。 関連:話した言葉を瞬時に翻訳!ウェアラブル翻訳機「ili(イリー)」は海外旅行をもっと身近に

あなたの一票でシリーズ化! Amazonがオリジナル作品でシリーズ化してほしいものを選ぶアンケート調査を実施中

Amazonプライムビデオで、日本未公開のAmazonオリジナル作品のパイロット版(第1話)を観て、今後その続きを観たい(シリーズ化してほしい)と思った作品を選ぶというアンケート調査を行っています。

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

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

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

HUAWEI nova liteの安いけどおススメのケース ケースで迷ってたらとりあえず買って損はしない

HUAWEI nova liteの安いけどおススメのケース ケースで迷ってたらとりあえず買って損はしない

現在一押しのミドルクラス端末、HUAWEI nova liteのケースを購入してみました。 買ったのは、NILLKINというブランドのケース。 ...

Android O Developer Preview 1をNexus 5Xに焼いてみた 今のところ違いはよくわからない

Android O Developer Preview 1をNexus 5Xに焼いてみた 今のところ違いはよくわからない

公開されたAndroid Oの開発者プレビュー1を早速Nexus 5Xに入れてみました。正直なところ、新機能についてはまだ実感できないというか、対応しているアプリがないので試せてはいないのですが、...

HUAWEI nova liteのコスパは異常 同価格帯の端末では競合がいない

HUAWEI nova liteのコスパは異常 同価格帯の端末では競合がいない

HUAWEIが若者向けのシリーズとしてあらたに投入したのnova、その下位モデルという位置づけのnova liteを購入してみました。 nova liteは公式ショップや量販店では販売しておらず、...

HUAWEI P10 lite発表 スペックはnova liteよりもやや上で価格は約3万5000円

HUAWEI P10 lite発表 スペックはnova liteよりもやや上で価格は約3万5000円

HUAWEIがMWCで発表したフラッグシップ、P10/P10 Plusに続き、廉価版となるP10 liteを発表しました(ただし、HUAWEIのサイト上では確認できず、画像やスペックはGSMAre...

MENU

back to top