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

マーツ

2020.01.21

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

Hamburgersとは？

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

Hamburgersの使い方

こちらからCSSデータをダウンロードします。 https://github.com/jonsuh/hamburgers/blob/master/dist/hamburgers.css ダウンロードしたデータをcssファイルに保存して読み込みます。

[sourcecode lang="html"]
<link rel="stylesheet" href="humberger.css">
[/sourcecode]

[sourcecode lang="html"]

[/sourcecode]

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

[sourcecode lang="html"]
<div class="hamburger">
    <div class="hamburger-box">
        <div class="hamburger-inner"></div>
    </div>
</div>
[/sourcecode]

[sourcecode lang="html"]

</div>

[/sourcecode]

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

[sourcecode lang="html"]
<div class="hamburger hamburger--3dx">
    <div class="hamburger-box">
        <div class="hamburger-inner"></div>
    </div>
</div>
[/sourcecode]

[sourcecode lang="html"]

</div>

[/sourcecode]

アニメーション一覧

「-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を記入します。サイトにはこれを追記する案内がないですが、これがないと動きません。

[sourcecode lang="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],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>
[/sourcecode]

[sourcecode lang="javascript"]

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],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>

[/sourcecode]

必要なソースのみを使う

CSSソースを見ると、全てのアニメーションパターンの記述がなされていますが、使用したいアニメーションが決まっている場合には、そこだけを抜き出した方がファイルが軽くなります。 1行目から56行目までが表示に必要な部分で、あとはコメントで「3DX」のように記述している箇所がアニメーションの必要箇所となります。関連記事