スマホでは当たり前になってきているハンバーガーメニューですが、そのハンバーガーメニューをタップやクリックした時に少し変わったアニメーションを見せたい場合があるかと思いますが、Hamburgersを使うと手軽に実装できます。 関連 jQueryで一歩先を行くハンバーガーメニューを実装する方法
Hamburgersとは？
ハンバーガーメニューをクリックすると、ハンバーガーメニューが「閉じる」アイコンに切り替わる様々なアニメーション「Hamburgers」はJonathan Suh氏によって作成されたものです。
Hamburgersの使い方
こちらからCSSデータをダウンロードします。 https://github.com/jonsuh/hamburgers/blob/master/dist/hamburgers.css ダウンロードしたデータをcssファイルに保存して読み込みます。
|
1 2 3 |
[sourcecode lang="html"] <link rel="stylesheet" href="humberger.css"> [/sourcecode] |
ハンバーガーメニューを表示する部分です。
|
1 2 3 4 5 6 7 |
[sourcecode lang="html"] <div class="hamburger"> <div class="hamburger-box"> <div class="hamburger-inner"></div> </div> </div> [/sourcecode] |
アニメーションサンプルを確認しながら、 「アニメーション一覧」からアニメーションさせたいクラス名を追記します。サンプルでは「hamburger–3dx」を追記しています。
|
1 2 3 4 5 6 7 |
[sourcecode lang="html"] <div class="hamburger hamburger--3dx"> <div class="hamburger-box"> <div class="hamburger-inner"></div> </div> </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を記入します。サイトにはこれを追記する案内がないですが、これがないと動きません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
[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] |
必要なソースのみを使う
CSSソースを見ると、全てのアニメーションパターンの記述がなされていますが、使用したいアニメーションが決まっている場合には、そこだけを抜き出した方がファイルが軽くなります。 1行目から56行目までが表示に必要な部分で、あとはコメントで「3DX」のように記述している箇所がアニメーションの必要箇所となります。 関連記事
