スマホサイトでよく見かける三本線のハンバーガーメニューは、webデザインでも重要な要素の1つです。
ハンバーガーメニュ―の基本的な作り方や、ハンバーガーメニューをサイトに設置するうえで考えたいメリット、デメリットについてご紹介します。
目次
ハンバーガーメニューとは？
ハンバーガーメニュ―とは、主に3本線アイコン使ったナビゲーションメニューのことです。
3本線アイコンがハンバーガーを連想させるため、ハンバーガーメニューと呼ばれています（三本線ではなく、三点でハンバーガーメニューアイコンを構成しているタイプもあります）。
画像右上のような三本線のアイコンをクリックすると、隠れていたメニュー画面が展開されます。
ハンバーガーメニューはwebサイトをスマホやタブレットで表示する場合によく見かけます。
PC版のサイトでは、サイドバーやヘッダーに様々なナビゲーションメニューを用意することができます。
一方画面が小さいスマホやタブレット版にPC版サイトと同じようなナビゲーションメニューを設置すると、サイドメニューが見切れてしまったり、デザインが乱雑になってしまいがちです。
このような問題点を解決するために登場するのがハンバーガーメニューです。
スマホ・タブレット版サイトでは、PC版で表示していたナビゲーションメニューを一旦隠して、ハンバーガーメニュー内に格納します。
こうすればナビゲーションメニューを無理のない形で残すことができます。
最近のwebサイトはレスポンシブwebデザインが適応されていることが多く、1つのサイトデザインに対し以下のような設定をすることがよくあります。
- PC版サイトではサイドバーを表示し、ハンバーガーメニューを非表示
- スマホやタブレット版ではサイドバーを非表示し、ハンバーガーメニューを表示
またPC版のサイトでもハンバーガーメニューを活用して、デザイン性を高めているものも見られます。
レスポンシブWEBデザインとは？プログラミングのコツはこれ！
ハンバーガーメニューの作り方
ではここでハンバーガーメニューを作る方法を3つ具体的に見てみましょう。
Javascriptでハンバーガーメニューを作ってみよう
ハンバーガーメニューで必要な基本イベントはこの2つです。
- ハンバーガーメニューを開くためのアイコン（三本線）をクリックすると、メニュー画面が表示される
- ハンバーガーメニューの閉じるアイコン（×）をクリックすると、メニュー画面が非表示になる
JavascriptではaddEventListenerというメソッドが用意されています。これはイベントを操作するメソッドです。
イベント対象がクリックされた時、関数を実行する構文は以下のような形になります。
イベント対象.addEventListener(“click”, 関数)
ハンバーガーメニューの作成手順はこうです。
まず以下のようにハンバーガーメニューの中身をつくり、適当なID名(ここではhum)を付けておきます。
またハンバーガーメニューを開くアイコンにopen、閉じるアイコンにcloseというID名を付けます。
アイコンには無料のwebフォントサービスFont Awesomeを使うと便利です。
次にそれぞれの要素を定数に代入しておきます。
const hum= document.getElementById(“hum”);
const open= document.getElementById(“open”);
const close=document.getElementById(“close”);
これでhumと書けば、ID名humの要素を操作できるようになりました。open、closeも同様です。
今度はアイコンをクリックしたときにハンバーガーメニューの中身を表示する関数を作ります。
- const showhum = () => {
- hum.style.display=”block”;
- }
- const hidehum = () => {
- hum.style.display=”none”;
- }
showhum関数は、humのdisplayプロパティをblockにすることができます。
hidehumはhumのdisplayプロパティをnoneにすることができます。display:noneと指定された要素は、非表示になり、レイアウト上存在しないことになります。
最後にaddEventListenerを使って、関数とクリックイベントを関連付けます。
open.addEventListener(“click”, showhum);
close.addEventListener(“click”, hidehum);
これでID名openが付いたアイコンをクリックすれば、ハンバーガーメニューが表示され、ID名closeのついたアイコンをクリックすればハンバーガーメニューが非表示になるコードが出来上がりました。
WordPressでコードをキレイに表示する方法。プラグインなし！
jQueryで作るともっと簡単
JavascriptライブラリjQuery を使うと、より簡単にハンバーガーメニューを作ることができます。
jQueryでは直接CSSセレクタを指定してHTML要素を操作できるので、Javascriptで書いた
const hum= document.getElementById(“hum”);
const open= document.getElementById(“open”);
const close=document.getElementById(“close”);
のようなコードを省略することができます。
さらにshow()、hide()といった要素を表示する、非表示にするという関数が最初から用意されているので、複雑な関数を自分で作る必要がありません。
加えてtoggle()という要素の表示と非表示を順次切り替える便利な関数も使えます。
これらを利用するとハンバーガーメニューのコードは
- $(“#open”).click(function () {
- $(“#hum”).toggle();
- });
のようにシンプルなものになります（このコードの場合は「閉じる」アイコンはなく、ID名openのアイコンがメニューを「開く」「閉じる」の両方の役割を果たしてくれます）。
toggle()の中には速度をミリ秒単位で指定できます。
例えばtoggle(2000)とすれば、ハンバーガーメニューが現れる速度、閉じる速度が2秒間かけて行われるため、ふわっとした印象を与えることができます。
このようにコードをよりシンプルなものにできるjQueryですが、利用するには外部からjQueryを読みこむ操作が必要になります。
またコードの中身は$(function(){ })で囲わなければうまく実行されないので注意しましょう。
CSSで作る方法もある
webサイトに動きを作れるのはJavascriptやjQueryだけではありません。実はCSSのみでもハンバーガーメニューを実装することができます。
CSSでハンバーガーメニューを作る際にはcheckboxを利用します。
checkboxがオンになった時にハンバーガーメニューを表示させ、逆にcheckboxがオフになった時にハンバーガーメニューを非表示にします。
checkbox自体は隠してしまい、checkboxのラベル部分にハンバーガーメニューアイコンや閉じるボタンを設定するというのがこの方法のトリッキーな点です。
JavascriptやjQueryよりも難しくなりますのでコード自体は省略しますが、transitionプロパティなどを上手に用いればかなり多彩なアニメーション表現ができます。
テンプレート素材カスタマイズなどJavascriptやjQueryを追加しにくい環境では、CSSを使ったハンバーガーメニューは便利です。
ハンバーガーメニューのメリット
ハンバーガーメニューを使うメリットは、狭い画面でもナビゲーションメニューを見やすく表示できることです。
スマホやタブレットでwebサイトを見る人が増えている現代では、PC版サイトのような画面いっぱいにメニューが表示されているデザインは見づらく感じてしまいます。
そこでハンバーガーメニューによって一旦ナビゲーションメニューを隠し、デザインに余裕を与えます。
メインコンテンツを大きく表示しつつ、見やすい画面を作ることができるのは大きなメリットです。
ハンバーガーメニューのデメリット
ハンバーガーメニューのデメリットはメニュー表示アイコンが分かりにくいことです。
スマホのヘビーユーザーなら何の説明がなくても「これはメニュー表示用のボタンだ」と気が付くことができるでしょう。
しかしライトユーザーにはハンバーガーメニューの意味が分からない可能性が大きいのです。
子のデメリットを補うため、ハンバーガーメニューアイコンと一緒に「MENU」などの文字を添えて分かりやすくしているデザインも見かけます。
さらにハンバーガーメニューを表示するためには、アイコンをタップするという動作が必要になってきます。
グローバルメニュー表示の為にいちいち指を動かさなければならない上、中身にどんな情報が表示されるのか開いてみるまで分かりません。
せっかくタップしたのに自分にとって必要なナビゲーションメニューが表示されなかったらがっかりしていしまいますね。
ハンバーガーメニューは広く使われているwebデザインパーツですが、ユーザーにとってはあまり使い勝手が良くないという面もあるのです。
ハンバーガーメニューはスマホやタブレット向けのwebサイトデザインを作る上で重要なパーツですが、メリットとデメリット両面から考えて、採用するかどうかを決めましょう。
