モバイルサイトのメニュー表示用としてハンバーガーメニューをよく見かけます。
ハンバーガーメニューの中には、アニメーションで、視覚的に「開く」と「閉じる」をわかりやすく表現しているものも最近よく見かけます。ただ、そういったアニメーションを自前で実装しようとすると、結構大変です。
けれど、そんな面倒なアニメーションを簡単なHTMLを書いて、クラスを指定するだけで使用できる「Hamburgers」というのがあるのを最近知りました。
これを使うと、結構簡単に以下のようなアニメーションメニューが作れます。
これが、結構使い勝手がよかったので、今後使うこともあるかと自分のメモがてら紹介です。
目次
Hamburgersとは
Hamburgersは、サイト上に簡単にアニメーション機能を持ったハンバーガーメニューを作成できるCSSです。
Bootstrapのように、クラスを指定するだけで様々なアニメーションのハンバーガーメニューを作成できるCSSフレームワークといってもいいかもしれません。
現在用意されているクラスは以下で、全18種類のハンバーガーメニューアニメーションを利用することができます。
- hamburger–arrow
- hamburger–arrow-r
- hamburger–arrowalt
- hamburger–arrowalt-r
- hamburger–boring
- hamburger–collapse
- hamburger–collapse-r
- hamburger–elastic
- hamburger–elastic-r
- hamburger–emphatic
- hamburger–emphatic-r
- hamburger–slider
- hamburger–slider-r
- hamburger–spin
- hamburger–spin-r
- hamburger–squeeze
- hamburger–vortex
- hamburger–vortex-r
Hamburgers利用の主な手順
Hamburgersを利用するには、以下の手順が必要です。
- Hamburgersをダウンロード＆設置
- ヘッダーでCSSファイルを読み込む
- フッターでスクリプトを読み込む
- ハンバーガーメニューとなるHTML要素を書く
いくつか手順は必要ではありますが、基本的にコピペのみでできるので自前でハンバーガーメニューを実装するよりは手軽かと思います。
Hamburgersをダウンロード＆設置
まずは、GitHubから「Download ZIP」ボタンを押してファイルをダウンロードします。
「hamburgers-master.zip」というファイルがダウンロードされると思うので解凍します。
で、中にある以下のファイルを取り出します。
- hamburgers-master/dist/hamburgers.min.css
そして、プロジェクトフォルダにCSSフォルダを作成して以下のように設置します。
- プロジェクトフォルダ/css/hamburgers.min.css
プロジェクトフォルダが、Wordpressの子テーマの場合は、以下のように設置します。
ヘッダーでCSSファイルを読み込む
次に、<head></head>内でCSSファイルを以下のように読み込みます。
通常サイトの場合
通常サイトでは以下のように<head></head>内で読み込みます。
<link rel="stylesheet" type="text/css" href="css/hamburgers.min.css">
WordPressテーマの場合
WordPressの、子テーマから利用する場合は以下のように。
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/hamburgers.min.css">
WordPress親テーマから利用する場合は以下のように書きます。
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/hamburgers.min.css">
フッターでスクリプトを読み込む
次に、</body>手前に以下のように記入します。
<script>
/**
* Hamburgersアニメーション用コード
*/
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>これは、ハンバーガーボタンをクリックした時用のJavaScriptコードです。
ハンバーガーメニューとなるHTML要素を書く
最後に、ハンバーガーメニューを表示したい箇所に、HTML要素を記入します。
設定と動作がわかりやすいように、全てのハンバーガーメニューのアニメーションを一覧にしたので、以下から好みのものを選択します。
hamburger–arrow
<div class="hamburger hamburger--arrow">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>hamburger–arrow-r
<div class="hamburger hamburger--arrow-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>hamburger–arrowalt
<div class="hamburger hamburger--arrowalt">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>hamburger–arrowalt-r
<div class="hamburger hamburger--arrowalt-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>hamburger–boring
<div class="hamburger hamburger--boring">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>hamburger–collapse
<div class="hamburger hamburger--collapse">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>hamburger–collapse-r
<div class="hamburger hamburger--collapse-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>hamburger–elastic
<div class="hamburger hamburger--elastic">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>hamburger–elastic-r
<div class="hamburger hamburger--elastic-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>hamburger–emphatic
<div class="hamburger hamburger--emphatic">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>hamburger–emphatic-r
<div class="hamburger hamburger--emphatic-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>hamburger–slider
<div class="hamburger hamburger--slider">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>hamburger–slider-r
<div class="hamburger hamburger--slider-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>hamburger–spin
<div class="hamburger hamburger--spin">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>hamburger–spin-r
<div class="hamburger hamburger--spin-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>hamburger–squeeze
<div class="hamburger hamburger--squeeze">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>hamburger–vortex
<div class="hamburger hamburger--vortex">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>hamburger–vortex-r
<div class="hamburger hamburger--vortex-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>まとめ
こんな感じで、セッティングさえしてしまえば、クラスを変更するだけで、様々な種類のハンバーガーメニューアニメーションを実装することができます。
そして実装が確定すれば、軽量化のために不要なアニメーションクラスは、削除してしまってもOKかと思います。
というわけで、「アニメーションするハンバーガーメニューを手軽に使ってみたい」とか「アニメーションハンバーガーメニューをサイトでちょっと試用してみたい」なんて場合は、Hamburgersは、結構手軽に試せるかと思います。
