【コピペOK】ハンバーガーメニューの作り方を徹底解説【jQuery】

このような悩みに答えます。

現代ではほとんどのサイトに使用されているハンバーガーメニューですが、HTMLやCSS、JavaScriptをそれぞれ書く必要があるので大変ですよね？

そこでこの記事では、ハンバーガーメニューの作り方を徹底解説します。

ただ作るだけではなく、キーボード操作や視覚支援ツールを利用する方への配慮を中心に、具体的な技術とテクニックも紹介します。

これを読めば、実務でも使える使いやすいハンバーガーメニューの作り方を1から理解することができます。
1から自分で作るので、カスタマイズも簡単にでき、様々な案件に対応できるようになります。

この記事を書いた人

すずき

フリーランスでwebデザイナーをしています。
デザインからコーディング、運用まで幅広く対応しています。
3年間で50件以上のサイトをコーディングしてきました。

ハンバーガーメニューとは

ハンバーガーメニューとは、三本線（≡）のアイコンで表されるメニューのことです。
名前の由来は、アイコンの形がハンバーガーのように見えることから来ています。

主にスマホ表示の際に使われていましたが、近年ではPC表示でも使われることが増えています。

アイコンがハンバーガーに似ていることからこの名前が付けられていますが、他にも以下のような呼び名があります。

ハンバーガーメニューの役割

ハンバーガーメニューの主な役割は、サイトをすっきり見せることです。

特にスマートフォンのような小さな画面で大きな効果を発揮します。
例えば、スマートフォンでウェブサイトを見るとき、たくさんのメニュー項目が画面を占めると混乱しますよね。
ハンバーガーメニューを使えば、これらの項目をきれいに隠し、必要なときだけ表示させることができます。

結果として、ユーザーは情報を簡単に見つけることができ、快適にサイトを利用できます。

ハンバーガーメニューは、スペースの有効利用とユーザビリティ向上のために欠かせない要素です。

メリットとデメリット

ウェブサイトを作るとき、ハンバーガーメニューはとても便利なツールです。
しかし、すべてのデザインには良い点とそうでない点があります。
ハンバーガーメニューも例外ではありません。

ハンバーガーメニューのメリットとデメリットをまとめました。

ハンバーガーメニューのメリットとデメリットを理解することで、みんなに使いやすいウェブサイトを作ることができます。

次からは、具体的なハンバーガーメニューの作り方を解説していきます。

実装デモ

ハンバーガーメニューの実装デモを紹介します。
HTMLとCSS、jQueryで実装しています。

jQueryを使用するメリット

ハンバーガーメニューの動作はバニラJavaScriptでも実装できますが、私はjQueryを使用しています。

理由は、jQueryを使用している制作会社がまだまだ多いからです。

近年はJavaScriptの書き方も簡単になり、jQueryと大差なく書くこともできます。
しかし、jQueryを使用している制作会社はまだまだ多く、読み込みを指定されることもしばしばあります。

jQueryを読み込まれているのであれば、使用した方がより簡単に書くことができますので、使わない手はありませんよね。

jQueryを使用していない案件であればJavaScriptで記述しても良いと思いますが、まだまだjQueryを使用している制作会社が多い為、それに合わせてjQueryで記述しています。

次からは、それぞれのパーツの具体的な作り方を解説していきます。

ハンバーガーボタンの作り方

ハンバーガーボタンの具体的な作り方は、以下の記事で解説しています。
レスポンシブにも最小限のコードで対応し、様々なデザイン・案件に対応できるようにしています。

あわせて読みたい

【CSS + jQuery】ハンバーガーボタンの作り方 ハンバーガーボタンの作り方がわからない ハンバーガーボタンの線が崩れる retina対応のハンバーガーボタンを作りたい このような悩みに答えます。 多くのwebサイトに実…

ハンバーガーメニューの作り方

ハンバーガーメニューの具体的な作り方は、以下の記事で解説しています。
jQueryはクラスの着脱のみとし、アニメーションはCSSで制御しているので、様々なアニメーションに簡単に対応できます。

あわせて読みたい

【CSS + jQuery】ハンバーガーメニューの作り方 こんにちは。すずきです。 この記事ではスマホ版のサイトなどでよく見かけるハンバーガーメニューの作り方を解説します。 こんな人にオススメ ハンバーガーメニューの作…

ユーザビリティとアクセシビリティについて考える

ウェブサイトのアクセシビリティとユーザビリティは、すべての人が快適に利用できるようにするために不可欠です。

アクセシビリティとは、障がいを持つ人を含むすべての人がウェブサイトを容易に利用できることです。
ユーザビリティは、ユーザーにとってウェブサイトが直感的で使いやすいことです。

ここでは、特にキーボードや音声読み上げツールを利用する人にとって使いやすいよう考慮します。
具体的には、以下の点に考慮し、すべてのユーザーが快適にウェブサイトを利用できるようにします。

aria-controls 属性を使用する

aria-controls 属性とは、別の要素を制御していることを示すものです。
今回のコードでは、以下のように記述しています。

<button aria-controls="drawer-nav">

aria-controls="drawer-nav"と記述することで、ボタンが drawer-navというidを制御していることが伝わります。
これにより、スクリーンリーダーを通じてボタンが何をするのかを理解できます。

aria-expanded 属性を使用する

aria-expanded 属性とは、制御している別の要素の状態を示すものです。
今回のコードでは、以下のように記述しています。

<button aria-expanded="false">

この属性の状態（ true または false ）によって、メニューの状態を伝えることができます。
JavaScriptで属性を制御することで、メニューのユーザビリティとアクセシビリティが向上します。

JavaScriptで属性を切り替える

jQueryを使用して、ハンバーガーボタンをクリックした際にaria-expandedの値を変更します。
これにより、メニューの開閉状態が反映されます。

具体的には、以下のコードで制御しています。

function toggleMenu(closeOnly) {
    var isExpanded = $drawerBtn.attr("aria-expanded") === "true";

    if (closeOnly && !isExpanded) {
      return; // メニューが既に閉じている場合は何もしない
    }

    $drawerBtn.attr("aria-expanded", !isExpanded);

これにより、ボタンがクリックされると aria-expanded 属性をチェックし、値を反転させます。

この制御により、スクリーンリーダーを通じてメニューの現在の状態を知ることができます。

このように、JavaScriptを利用してaria-expanded属性を管理することは、ユーザビリティとアクセシビリティを向上させるために重要です。

メニュー外をクリックするとメニューが閉じられるようにする

基本はハンバーガーボタンでメニューの開閉を制御しますが、それだけでは不便に感じる方もいます。
メニュー外クリックでメニューが閉じられるようにすると、使いやすさがさらに向上します。

HTMLとjQueryで簡単に実装できますので、具体的な方法を紹介します。

HTMLはメニューの背景となる.l-drawer-nav__bgをメニュー内に配置します。
この背景部分をクリックすると、メニューが閉じるようにしていきます。

<div class="l-drawer-nav__bg"></div>

jQueryでは、.l-drawer-nav__bgクリック時にメニューを閉じる処理を記述します。

var $drawerNavBg = $(".l-drawer-nav__bg");

$drawerNavBg.click(function () {
  toggleMenu(true);
});

このように、メニュー外をクリックすることでメニューを閉じる機能は、ウェブサイトの使いやすさを向上させるための重要な要素です。

Tabキーで操作できるようにする

サイトをTabキーで操作できるようにすることは、キーボード操作する人にとって使いやすくする上で重要です。

具体的には、以下の2点を確認します。

フォーカスが見えるようにする

Tabキーでの操作に重要なのは、どの要素がフォーカスされているか目視できることです。
CSSの :focus クラスを使用することで、どの要素がフォーカスされているか簡単に目視できるようにデザインできます。

デフォルトでもこのCSSは当たっていますが、使用しているリセットCSSによっては消されている可能性があります。

メニューを開いているときは、メニュー外にフォーカスを当てないようにする

ハンバーガーメニューが開いている時は、JavaScriptを使用してメニュー内の要素のみにフォーカスが当たるようにします。
今回の例では、以下のコードで実装しています。

<div class="l-drawer-nav__bg" tabindex="0"></div>

  // ナビゲーションメニューの背景にフォーカスが移った時のイベントハンドラ
  $drawerNavBg.on("focus", function () {
    // フォーカスをハンバーガーメニューボタンに戻す
    $drawerBtn.focus();
  });

HTMLにはtabindex="0"を指定し、フォーカス可能にしています。
jQueryではl-drawer-nav__bgにフォーカスが当たった時に、ハンバーガーボタンにフォーカスが戻るようにしています。

これで、ハンバーガーメニューを開いている時はメニュー外にフォーカスが当たらないようになります。
これにより、ウェブサイトのナビゲーションがより使いやすくなります。

Escapeキーでメニューを閉じられるようにする

ハンバーガーメニューをEscapeキーで簡単に閉じることができます。
この機能があると、キーボードで操作する人はかなり便利です。

こちらもJavaScriptで簡単に実装できます。

// キーボードイベントハンドラを追加
  $(document).keydown(function (e) {
    // Escキーが押された場合、メニューを閉じる
    if (e.key === "Escape") {
      toggleMenu(true);
    }
  });

このコードは、ユーザーがEscapeキーを押すと、toggleMenu(true) 関数が呼び出され、メニューが閉じるようになっています。

実装デモをもう一度載せておきます。
ユーザビリティとアクセシビリティに関するコードも入れているので、jQueryが複雑になっていますが、その分使いやすいメニューになっています。

See the Pen ドロワーナビテンプレート by すずき (@k-suzuki3533) on CodePen.

ハンバーガーメニューのカスタマイズ方法

ハンバーガーメニューのカスタマイズ方法については、以下の記事で紹介しています。
具体的なコードも載せているので、気に入ったものをコピペして使用してください。

あわせて読みたい

【CSS + jQuery】よく使うハンバーガーメニューの開閉アニメーション4選 こんにちは。すずきです。 この記事では実際によく使われるハンバーガーメニューの開閉アニメーションを紹介します。 こんな人にオススメ ハンバーガーメニューの開閉を…

よくある質問

ハンバーガーメニューの背景がスクロールされてしまいます。

ハンバーガーメニューの展開時に、<body>タグにもCSSを当てる必要があります。
詳しくは以下の記事で解説しています。

あわせて読みたい

ハンバーガーメニュー展開時に背景をスクロールさせない方法 ハンバーガーメニューを開いた時、bodyタグをスクロールさせない ハンバーガーメニューを閉じた時、開いた時の位置に戻したい このような悩みにお答えします。 この記事…

まとめ

この記事では、ハンバーガーメニューの使いやすい実装方法を解説しました。
重要なポイントは以下のとおりです。

これらを考慮することで、より使いやすいウェブサイトが作れるようになります。
ぜひ自分のウェブサイトでこれらのテクニックを試してみてください。