コピペで使える様々なハンバーガーメニューアニメーションHamburgers

コピペで使える様々なハンバーガーメニューアニメーションHamburgers

  • このエントリーをはてなブックマークに追加

スマホでは当たり前になってきているハンバーガーメニューですが、そのハンバーガーメニューをタップやクリックした時に少し変わったアニメーションを見せたい場合があるかと思いますが、Hamburgersを使うと手軽に実装できます。

関連 jQueryで一歩先を行くハンバーガーメニューを実装する方法

目次

Hamburgersとは?

ハンバーガーメニューをクリックすると、ハンバーガーメニューが「閉じる」アイコンに切り替わる様々なアニメーション「Hamburgers」はJonathan Suh氏によって作成されたものです。

Hamburgersの使い方

こちらからCSSデータをダウンロードします。
https://github.com/jonsuh/hamburgers/blob/master/dist/hamburgers.css

ダウンロードしたデータをcssファイルに保存して読み込みます。

<link rel="stylesheet" href="humberger.css">

ハンバーガーメニューを表示する部分です。

<div class="hamburger">
    <div class="hamburger-box">
        <div class="hamburger-inner"></div>
    </div>
</div>

アニメーションサンプルを確認しながら、
「アニメーション一覧」からアニメーションさせたいクラス名を追記します。サンプルでは「hamburger–3dx」を追記しています。

<div class="hamburger hamburger--3dx">
    <div class="hamburger-box">
        <div class="hamburger-inner"></div>
    </div>
</div>

アニメーション一覧

「-r」と付いているのはリバースアニメーションとなっています。

hamburger–3dx
hamburger–3dx-r
hamburger–3dy
hamburger–3dy-r
hamburger–3dxy
hamburger–3dxy-r
hamburger–arrow
hamburger–arrow-r
hamburger–arrowalt
hamburger–arrowalt-r
hamburger–arrowturn
hamburger–arrowturn-r
hamburger–boring
hamburger–collapse
hamburger–collapse-r
hamburger–elastic
hamburger–elastic-r
hamburger–emphatic
hamburger–emphatic-r
hamburger–minus
hamburger–slider
hamburger–slider-r
hamburger–spin
hamburger–spin-r
hamburger–spring
hamburger–spring-r
hamburger–stand
hamburger–stand-r
hamburger–squeeze
hamburger–vortex
hamburger–vortex-r

最後にJavaScriptを記入します。サイトにはこれを追記する案内がないですが、これがないと動きません。

<script>
    var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t,c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};
    var hamburgers = document.querySelectorAll(".hamburger");
    if (hamburgers.length > 0) {
        forEach(hamburgers, function(hamburger) {
            hamburger.addEventListener("click", function() {
            this.classList.toggle("is-active");
            }, false);
        });
    }
</script>

必要なソースのみを使う

CSSソースを見ると、全てのアニメーションパターンの記述がなされていますが、使用したいアニメーションが決まっている場合には、そこだけを抜き出した方がファイルが軽くなります。

1行目から56行目までが表示に必要な部分で、あとはコメントで「3DX」のように記述している箇所がアニメーションの必要箇所となります。

関連記事

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

SONICMOOVでは、Webデザイナー、コーダーの経験を経て、Webディレクターに。様々なWeb制作・アプリ開発に関わり、その後、便利な用務員に。

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation