スマートフォンでWebサイトを開くと、右上に三本線のボタンがよくありますね。押すとメニューが出てきて、もう一度押すと閉じる。このレッスンから数回に分けて、このメニューを自分で作れるようになります。まずは「どういうしくみなのか」を確認しておきましょう。
ハンバーガーメニューとは
ハンバーガーメニューとは、Webサイトのナビゲーションメニューの表示形式の一種です。3本の横線が並ぶアイコンが、ハンバーガー（バンズとパテ）のように見えることから名付けられました。アイコンを押すと、隠れていたメニューが表示されます。
呼び方はいくつかあります。どれもほぼ同じものを指しています。
- サイドメニュー
- ドロワーメニュー（引き出しのように出てくるメニュー）
- ナビゲーションドロワー
- オフキャンバスメニュー（画面の外に置いてあるメニュー）
トグルとは
三本線のボタンは「トグルボタン」とも呼ばれます。トグル（toggle）は、ダッフルコートの棒状のボタン（留め具）のこと。ITの分野では、同じ操作をするたびに、2つの状態が交互に切り替わるしくみを「トグル」と呼びます。押すと開く、もう一度押すと閉じる。ハンバーガーメニューは、まさにトグルです。
なぜスマホではメニューを隠すのか
まず、作る前にどう表示したいか（UIの仕様）を決めておきます。
| スマートフォン（幅が狭い） | PC（幅が広い） | |
|---|---|---|
| メニュー | 縦に並べて、ふだんは隠しておく | 横に並べて、いつも見せておく |
| 三本線のボタン | 右上に置く。押すとメニューが出る | いらないので消す |
横幅が狭いスマホ画面では、メニューが4つ以上あると横に並べきれません。そこでメニューを縦にまとめて一度隠し、ボタンを押したときだけ出すようにします。PCは幅が十分にあるので、メニューを横に並べ、ボタンは消します。
【ポイント】作るときはモバイルファースト
まずスマートフォン用の表示を作り、あとから「幅が広いときは横並びにする」とPC用のCSSを足していきます。この順番のほうが、CSSが短く、わかりやすくなります。
作り方は大きく3通り
| 作り方 | しくみ | この教科書では |
|---|---|---|
| CSSだけ | チェックボックスのON・OFFを合図に、メニューを出したり隠したりする | しくみを理解するために最初に作る |
| JavaScript | ボタンを押したらクラスを付け外しして、メニューを出したり隠したりする | 実際のサイトではこちらがおすすめ |
| jQuery | JavaScriptのライブラリで同じことをする（slideToggle など） | 以前の教材で使用。いまは素のJavaScriptで短く書けるので、新しく作るなら不要 |
この単元では、次の順番で進めます。
- 三本線のボタンを作る（CSSだけ）
- ボタンでメニューを開閉する（CSSだけ）
- JavaScriptで開閉する
- PCでは横並びにする（完成）
- メニューをページ上部に固定する
始める前に、ナビゲーションとはとレスポンシブウェブデザインのレッスンを読んでおくと、スムーズに進められます。