Hamburgersは、クラスを付与するだけで、様々なアニメーションに対応したハンバーガーメニュを実装できるスタイルシートです。
挙動については、以下デモページにてご確認いただけます。
Hamburgersの使い方
ステップ1. スタイルシートの設置と読み込み
GitHubからファイル一式をダウンロードします。ファイルを解答し、distフォルダ内のhamburgers.min.cssをサーバー上に設置します。
以下を<head>～<head>内に追加します。
<link href="dist/hamburgers.min.css" rel="stylesheet">
ステップ2. HTMLのマークアップ
HTMLは、以下のようにbutton要素かdiv要素で記述します。
<button class="hamburger hamburger--collapse" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div class="hamburger hamburger--3dx">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
全体を内包している.hamburgerクラスのところに、適用したいアニメーションのクラスを追加します。使用可能なクラスは以下の通りです。
- 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
ステップ3. ハンバーガー開閉時のクラス追加
.is-activeクラスが付いていると、ハンバーガーが閉じるボタンや矢印などに変化します。そのため、ハンバーガーメニューをクリック/タップした時に、.is-activeクラスを付与して開閉アニメーションが発動するようにスクリプトを追加します。
以下のようにjQueryで簡単に.is-activeクラスを追加したり削除したりすることができます。記述場所は、</body>の直前でOKです。すでにjQuery本体を読み込んでいる場合は、1行目は削除してください。
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.hamburger').click(function(){
$(this).toggleClass('is-active');
return false;
});
</script>
上記を追加することで、ハンバーガーをクリック/タップすると.is-activeクラスが追加され、もう一度クリック/タップすると.is-activeクラスが削除されます。
あとがき
色んなハンバーガーメニューを簡単に実装できて便利ですね。アニメーション付きのハンバーガーメニューを設置したい時は、ぜひご活用ください。