ハンバーガーボタンからドロワーメニューを開く方法【HTML/CSS/JavaScript・サンプルコード付き】

ハンバーガーボタンからドロワーメニューを開く方法

ハンバーガーボタンからドロワーメニューを開く方法を紹介します。このサンプルでは、3本線で表示したハンバーガーボタンをクリックすると、画面左側からドロワーメニューがスライドして表示されます。通常のテキストボタンではなく、Webサイトやスマートフォン向けページでよく使われるハンバーガーボタンをメニューの起点として利用できる構成です。

ヘッダーのナビゲーション、スマートフォン向けメニュー、会員サイトのメニュー、管理画面のナビゲーションなど、限られた表示領域から必要なときだけメニューを開きたい場面に利用できます。ドロワーメニューを開いている間はページ側へ半透明の背景を表示し、メニュー内の「閉じる」ボタンをクリックすると閉じます。背景部分をクリックしても閉じないため、閉じる操作は「閉じる」ボタンだけに統一しています。

HTMLではハンバーガーボタン、ドロワーメニューの見出し、メニュー項目、閉じるボタンの文字を変更できます。CSSではハンバーガーボタンのサイズや3本線の太さ、ドロワーメニューの横幅、余白、背景色、メニュー項目のデザイン、スライド速度などを調整できます。JavaScriptではis-activeクラスの追加と削除によってドロワーメニューと半透明背景を切り替えます。画面幅640px以下では余白を小さくしているため、スマートフォン・タブレット・PCで利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

ハンバーガーボタン

3本線のボタンをクリックすると、左側からメニューが表示されます。

3本線のハンバーガーボタンをクリックすると、画面左側からドロワーメニューが表示されます。「閉じる」ボタンをクリックするとメニューが閉じます。半透明の背景をクリックしてもドロワーメニューは閉じません。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>ハンバーガーボタンからドロワーメニューを開く</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- サンプル表示エリア -->
  <div class="hamburger-drawer-menu_wrap">

    <!-- タイトル -->
    <div class="hamburger-drawer-menu_title">
      ハンバーガーボタン
    </div>

    <!-- 説明文 -->
    <p class="hamburger-drawer-menu_text">
      3本線のボタンをクリックすると、左側からメニューが表示されます。
    </p>

    <!-- ハンバーガーボタン -->
    <button
      class="hamburger-drawer-menu_open"
      type="button"
      aria-label="メニューを開く"
      data-hamburger-drawer-open="">

      <!-- 3本線 -->
      <span class="hamburger-drawer-menu_icon" aria-hidden="true">
        <span></span>
        <span></span>
        <span></span>
      </span>

    </button>

  </div>

  <!-- ドロワーメニュー表示中の半透明背景 -->
  <div
    class="hamburger-drawer-menu_overlay"
    data-hamburger-drawer-overlay=""></div>

  <!-- ドロワーメニュー本体 -->
  <div
    class="hamburger-drawer-menu_drawer"
    data-hamburger-drawer=""
    role="dialog"
    aria-modal="true"
    aria-labelledby="hamburger-drawer-menu-heading">

    <!-- ドロワーメニューの見出し -->
    <div
      class="hamburger-drawer-menu_heading"
      id="hamburger-drawer-menu-heading">
      メニュー
    </div>

    <!-- メニュー項目 -->
    <nav
      class="hamburger-drawer-menu_nav"
      aria-label="メインメニュー">

      <a class="hamburger-drawer-menu_link" href="#">
        ホーム
      </a>

      <a class="hamburger-drawer-menu_link" href="#">
        サービス
      </a>

      <a class="hamburger-drawer-menu_link" href="#">
        お問い合わせ
      </a>

    </nav>

    <!-- ドロワーメニューを閉じるボタン -->
    <button
      class="hamburger-drawer-menu_close"
      type="button"
      data-hamburger-drawer-close="">
      閉じる
    </button>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* サンプル表示エリア */
.hamburger-drawer-menu_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側の余白。値を大きくすると余白が広がる */
  border:1px solid #e5e7eb; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* サンプル表示エリアの背景色 */
  text-align:center; /* 内容を中央揃えにする */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.hamburger-drawer-menu_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
}

/* 説明文 */
.hamburger-drawer-menu_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間 */
}

/* ハンバーガーボタン */
.hamburger-drawer-menu_open{
  display:inline-flex; /* 3本線をボタン中央へ配置 */
  width:48px; /* ボタンの横幅。値を大きくするとボタンが大きくなる */
  height:48px; /* ボタンの高さ。値を大きくするとボタンが大きくなる */
  padding:0; /* 内側余白を削除 */
  border:none; /* 標準の枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  align-items:center; /* 3本線を上下中央へ配置 */
  justify-content:center; /* 3本線を左右中央へ配置 */
  cursor:pointer; /* ポインターを表示 */
}

/* ハンバーガーボタンへマウスを重ねた状態 */
.hamburger-drawer-menu_open:hover{
  background:#1d4ed8; /* ホバー時の背景色 */
}

/* 3本線をまとめる要素 */
.hamburger-drawer-menu_icon{
  display:flex; /* 3本線を並べる */
  width:24px; /* 3本線の横幅。値を大きくすると線が長くなる */
  flex-direction:column; /* 3本線を縦方向へ並べる */
  gap:5px; /* 線同士の間隔。値を大きくすると間隔が広がる */
}

/* ハンバーガーボタンの線 */
.hamburger-drawer-menu_icon span{
  display:block; /* 線をブロック要素として表示 */
  width:100%; /* 親要素の横幅に合わせる */
  height:2px; /* 線の太さ。値を大きくすると太くなる */
  border-radius:2px; /* 線の端を丸くする */
  background:#ffffff; /* 線の色 */
}

/* ドロワーメニュー表示中の半透明背景 */
.hamburger-drawer-menu_overlay{
  position:fixed; /* 画面全体へ固定 */
  inset:0; /* 上下左右を0にして画面全体を覆う */
  z-index:9998; /* ドロワーメニューより下へ配置 */
  background:rgba(15,23,42,.35); /* 半透明背景。.35を大きくすると濃くなる */
  opacity:0; /* 閉じている状態では透明 */
  visibility:hidden; /* 閉じている状態では非表示 */
  pointer-events:none; /* 閉じている状態では操作を受け付けない */
  transition:
    opacity .3s ease,
    visibility .3s ease;
  /*
    0.3秒で背景を切り替える。
    値を大きくすると遅くなり、小さくすると速くなる。
  */
}

/* ドロワーメニューを開いたときの半透明背景 */
.hamburger-drawer-menu_overlay.is-active{
  opacity:1; /* 半透明背景を表示 */
  visibility:visible; /* 表示状態にする */
  pointer-events:auto; /* 背景側の操作を遮る */
}

/* ドロワーメニュー本体 */
.hamburger-drawer-menu_drawer{
  position:fixed; /* 画面へ固定 */
  top:0; /* 画面上端へ配置 */
  left:0; /* 画面左端へ配置 */
  z-index:9999; /* 半透明背景より手前へ配置 */
  width:320px; /* ドロワーメニューの横幅 */
  max-width:85%; /* 小さい画面での最大幅 */
  height:100vh; /* 画面の高さ全体を使用 */
  padding:32px 24px; /* 上下32px・左右24pxの内側余白 */
  overflow-y:auto; /* 内容が高い場合は縦スクロール可能にする */
  background:#ffffff; /* ドロワーメニューの背景色 */
  box-sizing:border-box; /* paddingを横幅と高さへ含める */
  transform:translateX(calc(-100% - 40px)); /* 画面左側へ隠す */
  visibility:hidden; /* 閉じている状態では非表示 */
  pointer-events:none; /* 閉じている状態では操作を受け付けない */
  transition:
    transform .3s ease,
    visibility .3s ease;
  /*
    0.3秒でドロワーメニューを開閉する。
    値を大きくするとゆっくり、小さくすると速くなる。
  */
}

/* ドロワーメニューを開いた状態 */
.hamburger-drawer-menu_drawer.is-active{
  transform:translateX(0); /* 画面内へ移動 */
  visibility:visible; /* 表示状態にする */
  pointer-events:auto; /* ドロワーメニュー内を操作可能にする */
  box-shadow:12px 0 30px rgba(15,23,42,.18); /* 右側へ影を表示 */
}

/* ドロワーメニューの見出し */
.hamburger-drawer-menu_heading{
  margin:0 0 28px; /* 下側28pxの余白 */
  color:#111827; /* 見出しの文字色 */
  font-size:24px; /* 見出しの文字サイズ */
  font-weight:700; /* 見出しを太字にする */
}

/* メニュー項目全体 */
.hamburger-drawer-menu_nav{
  display:flex; /* メニュー項目を並べる */
  margin:0 0 28px; /* 下側28pxの余白 */
  flex-direction:column; /* メニュー項目を縦方向へ並べる */
  gap:10px; /* メニュー項目同士の間隔 */
}

/* メニューリンク */
.hamburger-drawer-menu_link{
  display:block; /* リンク全体をクリック可能にする */
  padding:14px 16px; /* 上下14px・左右16pxの余白 */
  border-radius:8px; /* メニュー項目の角丸 */
  background:#f1f5f9; /* メニュー項目の背景色 */
  color:#111827; /* メニュー項目の文字色 */
  font-weight:700; /* メニュー項目を太字にする */
  text-decoration:none; /* 下線を非表示 */
}

/* メニューリンクへマウスを重ねた状態 */
.hamburger-drawer-menu_link:hover{
  background:#e2e8f0; /* ホバー時の背景色 */
}

/* 閉じるボタン */
.hamburger-drawer-menu_close{
  width:100%; /* 横幅いっぱいに表示 */
  padding:12px; /* 内側の余白 */
  border:none; /* 標準の枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタンの文字を太字にする */
  cursor:pointer; /* ポインターを表示 */
}

/* 閉じるボタンへマウスを重ねた状態 */
.hamburger-drawer-menu_close:hover{
  background:#1d4ed8; /* ホバー時の背景色 */
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* サンプル表示エリア */
  .hamburger-drawer-menu_wrap{
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }

  /* ドロワーメニュー本体 */
  .hamburger-drawer-menu_drawer{
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }

}

// ハンバーガーボタンを取得
const hamburgerDrawerOpen=document.querySelector(
  "[data-hamburger-drawer-open]"
);

// 閉じるボタンを取得
const hamburgerDrawerClose=document.querySelector(
  "[data-hamburger-drawer-close]"
);

// ドロワーメニュー本体を取得
const hamburgerDrawer=document.querySelector(
  "[data-hamburger-drawer]"
);

// 半透明背景を取得
const hamburgerDrawerOverlay=document.querySelector(
  "[data-hamburger-drawer-overlay]"
);

// ドロワーメニューを開く
function openHamburgerDrawer(){

  // ドロワーメニューを表示
  hamburgerDrawer.classList.add("is-active");

  // 半透明背景を表示
  hamburgerDrawerOverlay.classList.add("is-active");

}

// ドロワーメニューを閉じる
function closeHamburgerDrawer(){

  // ドロワーメニューを非表示
  hamburgerDrawer.classList.remove("is-active");

  // 半透明背景を非表示
  hamburgerDrawerOverlay.classList.remove("is-active");

}

// ハンバーガーボタンをクリックしたときに開く
hamburgerDrawerOpen.addEventListener(
  "click",
  openHamburgerDrawer
);

// 「閉じる」をクリックしたときに閉じる
hamburgerDrawerClose.addEventListener(
  "click",
  closeHamburgerDrawer
);

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されており、3本線のハンバーガーボタンをクリックすると画面左側からドロワーメニューが表示されます。HTMLでハンバーガーボタンとメニュー項目を配置し、CSSで3本線のデザインやドロワーメニューの表示位置を設定し、JavaScriptでメニューの開閉を制御します。

ハンバーガーボタンは3つのspan要素をCSSで横線として表示する構成です。画像やアイコンライブラリを使用していないため、線の長さや太さ、間隔、ボタンの大きさなどをstyle.cssだけで変更できます。

ドロワーメニューを開くとページ側へ半透明の背景が表示され、「閉じる」ボタンをクリックするとメニューと背景が非表示になります。半透明の背景部分には閉じる処理を設定していないため、背景をクリックしてもドロワーメニューは閉じません。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.html
ハンバーガーボタン、半透明背景、ドロワーメニュー、メニュー項目、閉じるボタンを配置しています。ハンバーガーボタンの3本線は3つのspan要素で構成しています。メニューの見出しやリンク文字、リンク先などもこのファイルで変更できます。

style.css
サンプル表示エリア、ハンバーガーボタン、3本線、半透明背景、ドロワーメニュー、メニューリンク、閉じるボタンのデザインを設定しています。通常時はドロワーメニューを画面左側へ隠し、is-activeクラスが追加されると画面内へスライドして表示します。

script.js
ハンバーガーボタンと閉じるボタンによるドロワーメニューの開閉を制御しています。ハンバーガーボタンをクリックするとドロワーメニューと半透明背景へis-activeクラスを追加し、「閉じる」をクリックするとクラスを削除します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置してください。3つのファイルは同じ階層へ保存します。準備ができたらsample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsを読み込むため、追加のJavaScriptライブラリやアイコン画像は必要ありません。

3本線のハンバーガーボタンをクリックすると、画面左側からドロワーメニューが表示されます。メニュー内には「ホーム」「サービス」「お問い合わせ」のリンクがあり、「閉じる」ボタンをクリックするとドロワーメニューが閉じます。実際のサイトで使用する場合は、index.html内の各href="#"を移動先のURLへ変更してください。

カスタマイズできる内容
index.htmlではハンバーガーボタン、ドロワーメニューの見出し、メニュー項目、リンク先、「閉じる」ボタンの文字を変更できます。メニュー項目を増やす場合は、hamburger-drawer-menu_linkクラスを付けたリンクをnav要素内へ追加します。

style.cssではハンバーガーボタンの大きさや色、3本線の長さ・太さ・間隔、ドロワーメニューの横幅や余白、半透明背景の濃さ、メニュー項目の背景色、角丸、影、スライド速度などを変更できます。

数値調整
style.css
max-width:700px;
サンプル表示エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

width:48px; height:48px;
ハンバーガーボタンの横幅と高さです。値を大きくするとボタン全体が大きくなり、小さくするとコンパクトになります。

width:24px;
ハンバーガーボタン内に表示する3本線の横幅です。値を大きくすると線が長くなります。

gap:5px;
3本線同士の間隔です。値を大きくすると線の間隔が広がり、小さくすると狭くなります。

height:2px;
ハンバーガーボタンの線の太さです。値を大きくすると線が太くなります。

background:rgba(15,23,42,.35);
ドロワーメニュー表示中の半透明背景です。.35を大きくすると背景が濃くなり、小さくすると薄くなります。

width:320px;
ドロワーメニューの横幅です。値を大きくするとメニューが横に広がり、小さくするとコンパクトになります。

max-width:85%;
ドロワーメニューが画面幅に対して占める最大幅です。狭い画面でドロワーメニューが画面内へ収まるようにしています。

padding:32px 24px;
ドロワーメニューの内側余白です。上下の32pxと左右の24pxを変更すると、メニュー内容と画面端との間隔を調整できます。

transform:translateX(calc(-100% - 40px));
閉じている状態のドロワーメニューを画面左側へ隠す位置です。40pxを大きくすると、さらに左側へ移動します。

transition:transform .3s ease, visibility .3s ease;
ドロワーメニューを開閉する時間です。.3sを大きくするとゆっくり、小さくすると速く切り替わります。

gap:10px;
ドロワーメニュー内の各メニュー項目の間隔です。値を大きくすると項目同士の間隔が広がります。

padding:14px 16px;
各メニューリンクの内側余白です。上下の14pxを大きくすると項目の高さが増え、左右の16pxを大きくすると文字と端の間隔が広がります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではサンプル表示エリアへwidth:100%とmax-width:700pxを設定し、ドロワーメニューにはwidth:320pxとmax-width:85%を設定しています。画面が狭い場合はドロワーメニューの横幅が自動的に縮小されます。

画面幅640px以下では、サンプル表示エリアをpadding:24px 18px;、ドロワーメニューもpadding:24px 18px;へ変更して左右の余白を抑えています。スマートフォン・タブレット・PCの画面幅に合わせてハンバーガーボタンとドロワーメニューを利用できます。