クラスを指定するだけで手軽にアニメーションハンバーガーメニューを作れる「Hamburgers」の使い方

モバイルサイトのメニュー表示用としてハンバーガーメニューをよく見かけます。

ハンバーガーメニューの中には、アニメーションで、視覚的に「開く」と「閉じる」をわかりやすく表現しているものも最近よく見かけます。ただ、そういったアニメーションを自前で実装しようとすると、結構大変です。

けれどそ、んな面倒なアニメーションを簡単なHTMLを書いて、クラスを指定するだけで使用できる「Hamburgers」というのがあるのを最近知りました。

これを使うと、結構簡単に以下のようなアニメーションメニューが作れます。

これが、結構使い勝手がよかったので、今後使うこともあるかと自分のメモがてら紹介です。

スポンサーリンク
レクタングル(大)広告

Hamburgersとは

Hamburgers by Jonathan Suh-

Hamburgersは、サイト上に簡単にアニメーション機能を持ったハンバーガーメニューを作成できるCSSです。

Bootstrapのように、クラスを指定するだけで様々なアニメーションのハンバーガーメニューを作成できるCSSフレームワークといってもいいかもしれません。

現在用意されているクラスは以下で、全18種類のハンバーガーメニューアニメーションを利用することができます。

  1. hamburger–arrow
  2. hamburger–arrow-r
  3. hamburger–arrowalt
  4. hamburger–arrowalt-r
  5. hamburger–boring
  6. hamburger–collapse
  7. hamburger–collapse-r
  8. hamburger–elastic
  9. hamburger–elastic-r
  10. hamburger–emphatic
  11. hamburger–emphatic-r
  12. hamburger–slider
  13. hamburger–slider-r
  14. hamburger–spin
  15. hamburger–spin-r
  16. hamburger–squeeze
  17. hamburger–vortex
  18. hamburger–vortex-r

Hamburgers利用の主な手順

Hamburgersを利用するには、以下の手順が必要です。

  1. Hamburgersをダウンロード&設置
  2. ヘッダーでCSSファイルを読み込む
  3. フッターでスクリプトを読み込む
  4. ハンバーガーメニューとなるHTML要素を書く

いくつか手順は必要ではありますが、基本的にコピペのみでできるので自前でハンバーガーメニューを実装するよりは手軽かと思います。

Hamburgersをダウンロード&設置

まずは、GitHubから「Download ZIP」ボタンを押してファイルをダウンロードします。

Hamburgersファイルのダウンロード

「hamburgers-master.zip」というファイルがダウンロードされると思うので解凍します。

で、中にある以下のファイルを取り出します。

  • hamburgers-master/dist/hamburgers.min.css

そして、プロジェクトフォルダにCSSフォルダを作成して以下のように設置します。

  • プロジェクトフォルダ/css/hamburgers.min.css

プロジェクトフォルダが、Wordpressの子テーマの場合は、以下のように設置します。

Wordpressの子テーマにHamburgersのCSSを設置

ヘッダーでCSSファイルを読み込む

次に、<head></head>内でCSSファイルを以下のように読み込みます。

通常サイトの場合

通常サイトでは以下のように<head></head>内で読み込みます。

WordPressテーマの場合

WordPressの、子テーマから利用する場合は以下のように。

WordPress親テーマから利用する場合は以下のように書きます。

完全にWordpressテーマの作法に則って読み込むなら、wp_enqueue_style()関数を使用してください。

フッターでスクリプトを読み込む

次に、</body>手前に以下のように記入します。

これは、ハンバーガーボタンをクリックした時用のJavaScriptコードです。

ハンバーガーメニューとなるHTML要素を書く

最後に、ハンバーガーメニューを表示したい箇所に、HTML要素を記入します。

設定と動作がわかりやすいように、全てのハンバーガーメニューのアニメーションを一覧にしたので、以下から好みのものを選択します。

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

まとめ

こんな感じで、セッティングさえしてしまえば、クラスを変更するだけで、様々な種類のハンバーガーメニューアニメーションを実装することができます。

そして実装が確定すれば、軽量化のために不要なアニメーションクラスは、削除してしまってもOKかと思います。

というわけで、「アニメーションするハンバーガーメニューを手軽に使ってみたい」とか「アニメーションハンバーガーメニューをサイトでちょっと試用してみたい」なんて場合は、Hamburgersは、結構手軽に試せるかと思います。

サイト Hamburgers by Jonathan Suh