【Javascript】ハンバーガーメニューを作ってみよう

Pocket

今回は「ハンバーガーメニュー」の実装例をメモしていきたいと思います。作り方は他にも色々あるとは思いますが、今回はJavascriptを使用したシンプルなハンバーガーメニューを作ってみたいと思います。

そもそも「ハンバーガーメニュー」ってなに?

ここで「ハンバーガーメニュー」という言葉にピンときていない人もいるかもしれないので確認しておきます。

ハンバーガーメニュー

画像の三本線が「ハンバーガーメニュー」と呼ばれるものです。このボタンをクリックすることで隠れていたグローバルメニューが開き、各ページに飛ぶことができます。
スマホサイズの等の小さな画面でよく使用され、サイトの利便性を向上させるために使用されます。ちなみにハンバーガーメニューという名称は、そのまんまハンバーガーに似ているという理由から来ているらしいですね(本当なのか?)。
今回はこのハンバーガーメニューをタップすると、右画面外から現れるメニューをJavascriptを使用して作成してみます。

ハンバーガーメニュー作成の一例

See the Pen
GRopEdB
by egg (@egg0522sei)
on CodePen.


いきなりですが完成形を見てましょう。こんな感じで右上にあるハンバーガーメニューを押すと右からメニューが現れます。そしてメニューの「×」ボタンを押すと、今度はメニューが隠れます。

HTML、CSS、Javascriptというそれぞれの言語が役割を担い、このような動作を実行しています。
各言語ごとの役割それぞれ解説していきます。

各要素の解説

HTML

まずHTMLについてです。このHTMLは三つのパーツから成り立っています。
それぞれを分解してみていきましょう。

本文部分

この部分はページの本文部分となります。bodyタグに「menu-open」のクラスを付けるのが大事で、このクラスをJavascript操作によって、とったりつけたりすることで、メニューの開閉を操作しています
他には「<i class=”fa fa-bars” id=”show”></i>」でハンバーガーメニューを表示しています。今回はfontawesomeによってこのボタンを表示しているので、<head>タグ内に
の一文を入れています。idは「show」としておきます。

それでは次のパーツを見てみます。

黒いカバー部分

このパーツはメニューを表示している間、本文のパーツに敷く黒いカバー部分です。
それでは次に最後のパーツです。

メニュー部分

メニュー部分となります。メニュー内容は用途によって変えるのもいいでしょう。
忘れてはならないのが「<i class=”fa fa-times” id=”hide”></i>」の「×」ボタン、メニューを閉じるボタンですね。idは「hide」としておきます。

HTMLのそれぞれのパーツ確認

  • 本文部分
  • 黒いカバー
  • メニュー

HTMLは大きくこの3つのパーツから成り立っています。続いてはCSSを見ていきましょう。

CSS

長いですねw 全部解説していくと厳しいので、各パーツごとに大事なところだけかいつまんでみていこうと思います。

body

body要素ですね。widthとheightは100%、topとleftは0、overflow-x:hidden;は必要な値です。それ以外はデザインに関するところなので、好みに変更していきましょう。

cover

次は黒いカバー部分となるところです。透明感を出す為にopacityは0.6、画面いっぱいまで伸ばすためにwidthとheightは100%、position:absolute;で絶対配置に設定し、topとleftを0にすることで画面左上に固定します。
z-index:1;、これはメニューが黒いカバーより下に重ならないようにするために設定しています。
そしてdisplay:none;によって、通常は非表示にしておきます。このdisplay:none;をdisplay:block;にすることで、表示・非表示を切り替えます。

menu

次はメニュー部分のCSSです。z-indexの数値を、黒いカバーで設定したz-indexの値より大きくすることで、このメニューが最前面に表示されるように設定しています。
widthはメニューの横幅を設定していますが、注意すべきはこのwidthで設定した数値分、rigthにマイナスとして設定する事です。これによりメニューが画面外に隠れるようになります。rigthの値が0のとき、メニューが画面右からひょっこり現れるんですね。

body要素に「menu-open」のclassがついた時のスタイル

上記3つはbodyタグに、「menu-open」のclassがついた時のスタイルを設定しています。それぞれの役割を見ていきます。

 

これはメニューが表示されている間、縦にスクロールしないようにしています。

 

黒いカバーを「display:none;」から「display:block;」に変えることで、表示させています。

 

画面外に隠れていたメニューを移動させて表示しています。

 

Javascript

さあいよいよ最後、Javascriptの記述を見ていきましょう。といってもコード自体はすごくシンプルです。

変数「show」、変数「hide」にそれぞれ、「show」と「hide」のidがついている要素を取得する記述をいれています。

showのidがついた要素をクリックした時の動作

そしてこの部分。「show」のidがついた要素、すなわちハンバーガーのボタンですね。これをクリックした時、body要素に「menu-open」のクラスをつけなさいという命令文がこれです。

hideのidがついた要素をクリックした時の動作

こっちの部分はもうお分かりですね?この部分は「hide」のidがついている要素、すなわちメニューにくっついている「×」ボタンをクリックした時、body要素のclassを”(空白)”にしなさいという意味です。

この二つの動作によって、body要素のclassを付けたり消したりして、「men-open」のクラスがついている時と、ついていない時の動作を変化させているんですね。

まとめ

はい、少々長くなってしまいましたが、今回はCSSとJavascriptを使用したハンバーガーメニュー実装の一例でした。
他にも色々と方法があるみたいなので、色々な方法で実装を試してみるのもいいと思います。
それではお疲れ様でした(・ω・)ノシ

エッグ

シェアする

コメントを残す

メールアドレスが公開されることはありません。

コメントする