スマホでは当たり前になってきているハンバーガーメニューですが、そのハンバーガーメニューをタップやクリックした時に少し変わったアニメーションを見せたい場合があるかと思いますが、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」のように記述している箇所がアニメーションの必要箇所となります。
関連記事