2020.01.21

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

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

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

目次
Hamburgersとは？
Hamburgersの使い方
- アニメーション一覧
- 必要なソースのみを使う

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>