生徒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.
完成
これでハンバーガーメニューの作成は完了です。
以下のリンクから完成内容を確認できます。
この記事で作成したメニューは簡素な内容ですが、参考にしていただければと思います。
WEBデザインの転職や副業の勉強におすすめの『クリエイターズファクトリー』
WEB制作の仕事への転職や、副業にすることを考えている方もいらっしゃると思います。
そういった方におすすめのスクールが、卒業がなくずっと利用できる『クリエイターズファクトリー』です。
WEBデザイナーは独学で目指すこともできますが、
- どうやって勉強すればよいのかわからない
- 通用するスキルが身についているのかわからない
- 仕事を獲得する方法がわからない
というような不安が出てくると思います。
クリエイターズファクトリーには、以下のサービスが用意されています。
- 結果が出るまで無期限で利用できる転職、副業サポート
- 内容を問わず無制限で質問が可能
- 実践環境として 現場研修に近いことを経験できる制作研修
結果が出るまで転職や副業のサポートが受けられる、というのは大きな魅力だと思います。
オンラインでも参加できる無料説明会も行われていますので、自分に合ったサービスか簡単に確認することができます。