スマートフォンに最適化したホームページが増加するに伴いハンバーガーメニューを目にする機会も増えました。ご存知の人も多いかと思いますが、ハンバーガーメニューはスマートフォン向けのホームページのヘッダーなどによく設置されている三本線のメニューボタンです。三本線の形状がハンバーガーに似ていることから、この名称で呼ばれています。ドロワーと呼ばれることもあります。

設置場所はヘッダーにも限りませんし、PC利用時も見かけることが多くあります。以前はハンバーガーメニュー とともに「MENU」というテキストをつけるなど、メニューであることを認知させるようにしたものも多くありました。しかし、最近はすっかり三本線のデザインだけでメニューとして認知している人が多いでしょう。

たくさん見かけるハンバーガーメニュー、見せ方はホームページによって様々に異なるので、CSSの勉強においてもとてもプラスになります。今回は、ハンバーガーメニューの事例をいろいろとピックアップしてご紹介したいと思います。CSSだけではなくjQueryやJavaScriptも使って上手に魅せている素敵なハンバーガーメニューをチェックしてみましょう。

RSR（CSS＋jQuery）

image_01.jpg
（画像引用：RSRホームページより）
https://rsr.wess.co.jp/2019/

大人気のライジングサンロックフェスティバルのホームページです。もっとも基本的でありシンプルなハンバーガーメニューの事例として最初にピックアップしました。ヘッダー右上のハンバーガーメニュー をタップすると簡潔なメニューが表示されます。ベーシックな作り方として把握しておきましょう。

明治大学（CSS＋jQuery）

image_02.jpg
（画像引用：明治大学ホームページより）
https://www.meiji.ac.jp/

明治大学のホームページは固定したヘッダーの右上にハンバーガーメニューを配置しています。ヘッダーにはアクセスや検索、言語切り替えメニューも搭載しており、ユーザーの利便性への配慮を感じます。ハンバーガーメニューをクリックすると多くのメニューが存在していることがわかります。規模にもよりますが、大学のホームページはページ数が多いことが多く、メニューが複雑になりがちです。このホームページはアコーディオンを使うことで、できるだけ初期表示の状態をごちゃごちゃさせずに工夫しているところが魅力と言えるでしょう。

カリモクキャット（CSS＋jQuery）

image_03.jpg
（画像引用：カリモクキャットホームページより）
https://karimoku-cat.jp/ja/

モノトーンが印象的なシンプルでページ数が少なめのホームページです。右上に配置されたハンバーガーメニューをタップすると、上からメニューが流れるように表示されるさわやかな動きが印象的です。主なメニュー大きなフォントで表示し、下には会社概要やプライバシーポリシーといったメニューやソーシャルボタンを設置しています。右サイドには言語切り替えを配置し、スクロールせずにどのメニューも綺麗に認識できるところが素晴らしいです。