スマホ用メニューボタンに良さそうな2Wayトグルボタンを手軽に作成できる「Transformicons」がステキ

Transformiconsというアニメーションボタンを生成できるジェネレータを使ってみました。

これが、CSSとJavaScriptをジェネレーターで生成するだけで「メニューボタン←→閉じるボタン」のような、トグルボタンを簡単に作成することができました。

WordPressでも、結構簡単にツーウェイボタンを利用することができたので、その方法などの紹介です。

photo by Kumar’s Edit

こんなボタンがつくれる

Transformiconsで生成すると以下のようなボタンを手軽に作ることができます。

クリックするとアニメーションで切り替わります。

メニューボタン

グリッド

追加

メール

読み込み中

Transformiconsの使い方

Transformiconsを実際に、使ってみたんですが、以下のような手順が必要のようです。

主な手順

主な手順は、以下の4手順です。

Transformiconsファイルのダウンロード
利用したいアイコンの選択
HTMLとCSSの取得
Transformiconsスクリプトの呼び出し

TransformiconsでJavaScriptも生成されるんですけど、僕の場合、うまくいかなかったので、スクリプトファイルを呼び出す形の方法です。

Transformiconsファイルのダウンロード

まずは、「grayghostvisuals/transformicons · GitHub（現在配布終了）」から、ファイルをダウンロードします。

「transformicons-master.zip」という圧縮ファイルがダウンロードされるので、解凍します。

利用するのは、「transformicons-master/dist/js/transformicons.js」ファイルのみです。

僕は、「js/transformicons.js」ごと、Wordpressの子テーマに放り込んで利用してみました。

利用したいアイコンの選択

次に、Transformicons Builderから利用したいアイコンを選択します。

利用したいTransformiconsボタンを、以下のようなトグルボタンで選択します。（トグルボタンが緑色になったら選択されています。）

HTMLとCSSの取得

利用するボタンを選択したら、次は生成です。

同じページの下の方にある、「Build」ボタンをクリックします。

オプションで、CSSかSassが、JavaScriptを縮小化するかなどが選択できます。

「Build」ボタンを押すと以下のように、コードが生成されます。

あとは、生成されたコードを貼り付けて使用します。

今回は、この中の、マークアップとスタイルのコードを利用します。

最初の、メニューボタンのコードを取得するとこんな感じです。

以下のマークアップは、表示したい場所に貼り付けます。

<button type="button" class="tcon tcon-menu--xbutterfly" aria-label="toggle menu">
  <span class="tcon-menu__lines" aria-hidden="true"></span>
  <span class="tcon-visuallyhidden">toggle menu</span>
</button>

以下のスタイルシートは、CSSファイルに保存して、ヘッダーで呼び出しても良いですし、<style></style>で囲んでHTMLの中で呼び出しても良いかと思います。

.tcon {
  appearance: none;
  border: none;
  cursor: pointer;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 40px;
  transition: 0.3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 40px;
  background: transparent; }
  .tcon > * {
    display: block; }
  .tcon:focus {
    outline: none; }

.tcon-menu__lines {
  display: inline-block;
  height: 5.71429px;
  width: 40px;
  border-radius: 2.85714px;
  transition: 0.3s;
  background: black;
  position: relative; }
  .tcon-menu__lines::before, .tcon-menu__lines::after {
    display: inline-block;
    height: 5.71429px;
    width: 40px;
    border-radius: 2.85714px;
    transition: 0.3s;
    background: black;
    content: '';
    position: absolute;
    left: 0;
    -webkit-transform-origin: 2.85714px center;
    transform-origin: 2.85714px center;
    width: 100%; }
  .tcon-menu__lines::before {
    top: 10px; }
  .tcon-menu__lines::after {
    top: -10px; }
  .tcon-transform .tcon-menu__lines {
    -webkit-transform: scale3d(.8, .8, .8);
    transform: scale3d(.8, .8, .8); }

.tcon-menu--xbutterfly {
  width: auto; }
  .tcon-menu--xbutterfly .tcon-menu__lines::before, .tcon-menu--xbutterfly .tcon-menu__lines::after {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    transition: top .3s .6s ease, -webkit-transform .3s ease;
    transition: top .3s .6s ease, transform .3s ease; }
  .tcon-menu--xbutterfly.tcon-transform .tcon-menu__lines {
    background: transparent; }
    .tcon-menu--xbutterfly.tcon-transform .tcon-menu__lines::before, .tcon-menu--xbutterfly.tcon-transform .tcon-menu__lines::after {
      top: 0;
      transition: top .3s ease, -webkit-transform .3s .5s ease;
      transition: top .3s ease, transform .3s .5s ease;
      width: 40px; }
    .tcon-menu--xbutterfly.tcon-transform .tcon-menu__lines::before {
      -webkit-transform: rotate3d(0, 0, 1, 45deg);
      transform: rotate3d(0, 0, 1, 45deg); }
    .tcon-menu--xbutterfly.tcon-transform .tcon-menu__lines::after {
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
      transform: rotate3d(0, 0, 1, -45deg); }

.tcon-visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }
  .tcon-visuallyhidden:active, .tcon-visuallyhidden:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto; }

ボタン一つだけでも結構長いスタイルシート指定が必要です。

Transformiconsスクリプトの呼び出し

最後に、TransformiconsのJavaScriptファイルを呼び出し、コードを記入します。

利用するには、以下のようなコードを</body>タグ手前で呼び出せばOKかと思います。（※マークアップより先に呼び出すと動作しなかった。）

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

WordPressの子テーマなどで呼び出すには、以下のように書いてもOKかと思います。

<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/transformicons.js"></script>
<script>transformicons.add('.tcon');</script>

動作確認

上記の手順で、コードを貼り付けていくと、以下のようなトグルメニューボタンを利用することができます。

まとめ

このような感じで、ウェブアイコンフォントも不要で綺麗なボタンを、簡単に作成することができます。

モバイル用の、左側からニュッと出るメインメニュー用のボタンなどに利用すると、自前で、「閉じる」用のインターフェースを作ったり、コーディングしたりする手間が省けるので、その分楽ができるのではないかと思います。