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)

タグ: , , ,

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

最新情報をお届けします

Amazonでビデオレンタルに使える200円クーポンを配布中(2月26日まで)

2月24日から始まったプレミアムフライデー、導入企業はSSRガチャ並みのレア度で実際に恩恵にあずかれた人はごくわずかのようです。 しかし、Amazonではプレミアだった人もそうじゃなかった人もビデオで

スライドQWERTYなMoto Modsが間もなくIndiegogoでキャンペーンを開始

やっぱり出てきた、Moto Z用QWERTYなMoto Mods! motorolaのMoto Z / Moto Z PlayはMoto Modsという着せ替えジャケットに対応しており、バッテリーやカ

指紋認証で管理するパーソナル金庫のような財布Cashewがindiegogoを通じて販売中

各種電子マネーや、bitcoinなどの仮想通貨はだいぶ浸透してきていますが、まだまだ現金が必要ですし、クレジットカードなども持ち運ぶ必要があります。 ただそれらを財布に入れて持ち運ぶのは紛失などが心配

Qualcomm、スタンドアロンVR開発キットをSnapdragon 835にアップデート

QuaicommがSnapdragon 835になったスタンドアロンVRの開発キットを発表しました。 昨年9月にはSnapdragon 820版の開発キットを発表していたので、そのバージョンアップです

SIMトレイを搭載したHUAWEI Watch 2の画像がリーク

HUAWEIが今週末から始まるMWCでHUAWEI P10とともに発表するスマートウォッチ、HUAWEI Watch 2がリークしています。 Android Wear 2.0を搭載する端末で、LG W

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

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

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

HUAWEI nova liteはHUAWEI P8 lite(2017)でhonor 8 liteでもある

HUAWEI nova liteはHUAWEI P8 lite(2017)でhonor 8 liteでもある

先日HUAWEI Japanが発表したHUAWEI nova lite、他国にはないラインナップで日本市場向けの新規モデルかと思ったのですが、欧州で2月から販売開始されたHAUWEI P8 lit...

SIMトレイを搭載したHUAWEI Watch 2の画像がリーク

SIMトレイを搭載したHUAWEI Watch 2の画像がリーク

HUAWEIが今週末から始まるMWCでHUAWEI P10とともに発表するスマートウォッチ、HUAWEI Watch 2がリークしています。 Android Wear 2.0を搭載する端末で、L...

スライドQWERTYなMoto Modsが間もなくIndiegogoでキャンペーンを開始

スライドQWERTYなMoto Modsが間もなくIndiegogoでキャンペーンを開始

やっぱり出てきた、Moto Z用QWERTYなMoto Mods! motorolaのMoto Z / Moto Z PlayはMoto Modsという着せ替えジャケットに対応しており、バッテリ...

HUAWEI P9よりもおススメ! honor 8の詳細レビュー

HUAWEI P9よりもおススメ! honor 8の詳細レビュー

上位機種のHUAWEI P9と同等のスペックを持つhonor 8の詳細レビュー。HUAWEI P9やASUS ZenFone 3と比較しながら紹介します。...

MENU

back to top