生徒JavaScript を使わずにハンバーガーメニューを作ることはできますか？
先生HTMLとCSSだけでのハンバーガーメニューの作り方を説明します
ハンバーガーメニューとは
PCとスマホの両方に対応したWEBサイトでは、スマホからのアクセス時には、メニューをハンバーガーメニューに変えて表示することがよくあります。
メニューを表す3本の横線
がハンバーガーのように見えるということで、ハンバーガーメニューと呼ばれています。
ハンバーガーメニューはJavaScriptを使わずにHTMLとCSSだけでも作成することができます。
この記事では、HTMLとCSSだけでハンバーガーメニューを作る方法を説明します。
- HTMLとCSSだけでハンバーガーメニューを作る方法
作成方法の流れ
以下の流れでハンバーガーメニューを作成していきます。
- メニューの土台を作成
- PC用のメニューを作成
- スマホ用のメニューを作成
- 画面サイズによってPC用とスマホ用のメニューの表示を切り替える
ヘッダーを作成
まずは、メニューの土台となるヘッダー部分を作成します。
See the Pen hamburger-menu by mik20621 (@mik20621) on CodePen.
PC用メニューの土台を作成
次に、PC用のメニューの土台を以下のサイズで作成します。
See the Pen hamburger-menu by mik20621 (@mik20621) on CodePen.
PC用のメニューを作成
続けて、PC用のメニューの内容を作成します。
See the Pen hamburger-menu by mik20621 (@mik20621) on CodePen.
ホバー時に色を変える
選択しているメニューがわかりやすいように、メニュー項目にカーソルを合わせると背景色が変わるようにします。
See the Pen hamburger-menu by mik20621 (@mik20621) on CodePen.
スマホ用メニューのボタンを作成
画面の右上隅にスマホ用メニュー（ハンバーガーメニュー）のボタンを表示します。
See the Pen hamburger-menu5 by mik20621 (@mik20621) on CodePen.
ハンバーガーメニューのボタンをクリックするたびボタンの表示を切り替える
ハンバーガーメニューのボタンをクリックするたびに、メニューが閉じている状態（横3本線）と開いた状態（白のバツ印）が切り替わるようにします。
ハンバーガーメニューのボタンと同じ位置、同じ大きさのチェックボックスを非表示状態で配置して、チェックボックスのON/OFFでメニューの状態が切り替えるようにします。
See the Pen hamburger-menu by mik20621 (@mik20621) on CodePen.
スマホ用メニューを作成
スマホ用メニューの内容を作成します。
See the Pen hamburger-menu by mik20621 (@mik20621) on CodePen.
ハンバーガーメニューのクリック操作を作成
ハンバーガーメニューをクリックするたびに、スマホ用メニューの位置を切り替えます。
普段は画面外に位置させて見えないようにして、メニューをクリックすると画面左端に位置を変えて、画面全体に表示されるようにします。
See the Pen hamburger-menu by mik20621 (@mik20621) on CodePen.
画面サイズによって表示するメニューを切り替える
画面サイズによって表示するメニューを切り替えるためにメディアクエリを追加します。
- 画面サイズが1280px以上の場合、PC用メニューを表示して、スマホ用メニューは非表示
- 画面サイズが1280pxより小さい場合、PC用メニューは非表示で、スマホ用メニューは表示
See the Pen hamburger-menu9 by mik20621 (@mik20621) on CodePen.
完成
これでハンバーガーメニューの作成は完了です。
以下のリンクから完成内容を確認できます。
この記事で作成したメニューは簡素な内容ですが、参考にしていただければと思います。