画面下から開くドロワーメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】

表示位置・メニュー項目・サイズ・色・余白・閉じ方などを設定して、HTML・CSS・JavaScriptを自動生成できます。

画面下から開くドロワーメニューの作り方

画面下から開くドロワーメニューの作り方を紹介します。このサンプルでは、「メニューを開く」をクリックすると画面下に隠れていたドロワーメニューが上方向へスライドして表示されます。「閉じる」をクリックすると、ドロワーメニューが画面下へ戻って非表示になります。

HTMLでドロワーメニューと半透明背景を配置し、CSSのtransform:translateY()を使って画面下に隠れた状態と画面内に表示された状態を切り替えます。JavaScriptではis-activeクラスを追加・削除することで、ドロワーメニューと半透明背景を同時に表示・非表示にします。メニューを開いている間は半透明背景がページ全体を覆いますが、背景をクリックしてもドロワーメニューは閉じません。

画面下から表示するドロワーメニューは、スマートフォン向けのナビゲーション、ECサイト、会員ページ、サービスサイトなど、ページ下部からメニューを表示したい場面で利用できます。メニュー項目、背景色、余白、ドロワーメニューの高さ、スライド速度などはHTMLやCSSから変更できるため、サイトのデザインや用途に合わせて調整できます。

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

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

デモ

画面下から開くドロワーメニュー

「メニューを開く」をクリックすると、画面下からドロワーメニューが表示されます。

「メニューを開く」をクリックすると、ドロワーメニューが画面下から表示されます。「閉じる」をクリックすると画面下へ戻って非表示になります。半透明の背景をクリックしてもドロワーメニューは閉じません。

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

<!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>

  <!-- ドロワーメニューを開く操作エリア -->
  <main class="bottom-slide-drawer-menu_wrap">

    <!-- 操作エリアのタイトル -->
    <div class="bottom-slide-drawer-menu_title">
      画面下から開くドロワーメニュー
    </div>

    <!-- 操作方法の説明 -->
    <p class="bottom-slide-drawer-menu_text">
      「メニューを開く」をクリックすると、画面下からドロワーメニューが表示されます。
    </p>

    <!-- ドロワーメニューを開くボタン -->
    <button
      class="bottom-slide-drawer-menu_open"
      type="button"
      data-bottom-slide-drawer-menu-open="">
      メニューを開く
    </button>

  </main>

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

  <!-- 画面下から表示するドロワーメニュー -->
  <aside
    class="bottom-slide-drawer-menu_drawer"
    data-bottom-slide-drawer-menu-drawer=""
    aria-hidden="true">

    <!-- ドロワーメニュー内側 -->
    <div class="bottom-slide-drawer-menu_inner">

      <!-- ドロワーメニューの見出し -->
      <div class="bottom-slide-drawer-menu_heading">
        メニュー
      </div>

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

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

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

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

      </nav>

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

    </div>

  </aside>

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

</body>
</html>

/* すべての要素 */
*,
*::before,
*::after{
  box-sizing:border-box; /* paddingと枠線を要素サイズに含める */
}

/* ページ全体 */
body{
  margin:0; /* ページ外側の余白をなくす */
  padding:40px 20px; /* 上下40px・左右20pxの余白 */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体のフォント */
}

/* ドロワーメニューを開く操作エリア */
.bottom-slide-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; /* 内容を中央揃え */
}

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

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

/* ドロワーメニューを開くボタン */
.bottom-slide-drawer-menu_open{
  padding:12px 26px; /* 上下12px・左右26pxの内側余白 */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

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

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

/* ドロワーメニュー表示中の背景 */
.bottom-slide-drawer-menu_overlay.is-active{
  opacity:1; /* 半透明背景を表示 */
  visibility:visible; /* 表示状態へ変更 */
  pointer-events:auto; /* ページ側の操作を遮る */
}

/* 画面下から表示するドロワーメニュー */
.bottom-slide-drawer-menu_drawer{
  position:fixed; /* 画面へ固定 */
  left:0; /* 画面左端から配置 */
  bottom:0; /* 画面下端へ配置 */
  z-index:9999; /* 半透明背景より前面へ配置 */
  width:100%; /* 画面横幅いっぱいに表示 */
  max-height:85vh; /* 画面高さの85%を最大値にする */
  padding:32px 24px; /* 上下32px・左右24pxの内側余白 */
  overflow-y:auto; /* 内容が長い場合は縦スクロール可能にする */
  background:#ffffff; /* ドロワーメニューの背景色 */
  transform:translateY(calc(100% + 40px)); /* 画面下側へ隠す */
  visibility:hidden; /* 閉じている状態では非表示 */
  pointer-events:none; /* 閉じている状態では操作を受け付けない */
  transition:
    transform .3s ease,
    visibility .3s ease; /* 0.3秒で上下へ移動する */
}

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

/* ドロワーメニュー内側 */
.bottom-slide-drawer-menu_inner{
  width:100%; /* 利用可能な横幅いっぱいに表示 */
  max-width:700px; /* 内容の最大横幅 */
  margin:0 auto; /* 左右中央へ配置 */
}

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

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

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

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

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

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

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

  /* スマートフォン用のページ全体 */
  body{
    padding:24px 16px; /* 上下24px・左右16pxへ余白を縮小 */
  }

  /* スマートフォン用の操作エリア */
  .bottom-slide-drawer-menu_wrap{
    padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
  }

  /* スマートフォン用のドロワーメニュー */
  .bottom-slide-drawer-menu_drawer{
    padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
  }

}

// ドロワーメニューを開くボタンを取得
const bottomSlideDrawerMenuOpen=document.querySelector(
  "[data-bottom-slide-drawer-menu-open]"
);

// ドロワーメニューを閉じるボタンを取得
const bottomSlideDrawerMenuClose=document.querySelector(
  "[data-bottom-slide-drawer-menu-close]"
);

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

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

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

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

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

  // アクセシビリティ用の状態を更新
  bottomSlideDrawerMenuDrawer.setAttribute("aria-hidden","false");

}

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

  // ドロワーメニューを画面下へ戻す
  bottomSlideDrawerMenuDrawer.classList.remove("is-active");

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

  // アクセシビリティ用の状態を更新
  bottomSlideDrawerMenuDrawer.setAttribute("aria-hidden","true");

}

// 「メニューを開く」をクリックしたとき
bottomSlideDrawerMenuOpen.addEventListener("click",function(){

  // ドロワーメニューを開く
  openBottomSlideDrawerMenu();

});

// 「閉じる」をクリックしたとき
bottomSlideDrawerMenuClose.addEventListener("click",function(){

  // ドロワーメニューを閉じる
  closeBottomSlideDrawerMenu();

});

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLで「メニューを開く」ボタン、半透明背景、ドロワーメニュー、ナビゲーションリンク、「閉じる」ボタンを配置し、CSSでドロワーメニューを画面下に隠して、開いたときに画面内へ表示します。JavaScriptではis-activeクラスを追加・削除して開閉状態を切り替えます。

閉じている状態では、CSSのtransform:translateY(calc(100% + 40px));によってドロワーメニュー全体を画面下へ移動しています。「メニューを開く」をクリックするとis-activeクラスが追加され、transform:translateY(0);へ変化することで、画面下からドロワーメニューが表示されます。

メニューを開いている間は半透明背景が画面全体へ表示されますが、背景部分にはクリックによる閉じる処理を設定していません。ドロワーメニューは「閉じる」ボタンから閉じる構成です。外部サービスや外部ライブラリ、APIキーなどは使用していません。

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

各ファイルの役割
index.html
「メニューを開く」ボタン、半透明背景、画面下から表示するドロワーメニュー、メニューの見出し、「ホーム」「サービス」「お問い合わせ」のナビゲーションリンク、「閉じる」ボタンを配置しています。表示する文章やメニュー項目、リンク先を変更する場合はindex.htmlを編集します。

style.css
操作エリア、開くボタン、半透明背景、ドロワーメニュー、メニューリンク、閉じるボタンのデザインと開閉時の動きを設定しています。画面下から表示する位置はbottom:0;とtranslateY()で設定しています。横幅、高さ、余白、色、影、開閉速度などを変更する場合はstyle.cssを編集します。

script.js
「メニューを開く」と「閉じる」のクリック処理を設定しています。開く場合はドロワーメニューと半透明背景へis-activeクラスを追加し、閉じる場合は両方から削除します。半透明背景にはクリックイベントを設定していません。

設置方法・使い方
sampleフォルダを作成し、その直下へindex.html、style.css、script.jsを配置してください。index.htmlからstyle.cssとscript.jsを読み込む構成のため、3つのファイルは同じ階層へ保存します。

ファイルを配置したら、sample/index.htmlをブラウザで開きます。「メニューを開く」をクリックすると、画面下に隠れていたドロワーメニューが画面内へ表示されます。「閉じる」をクリックすると画面下へ戻り、非表示になります。

メニューリンクにはサンプルとしてhref="#"を設定しています。実際のサイトで使用する場合は、index.htmlの各href="#"を移動先ページのURLやパスへ変更してください。

カスタマイズできる内容
index.htmlでは、操作エリアのタイトルや説明文、ドロワーメニューの見出し、メニュー項目、リンク先、「閉じる」ボタンの文字を変更できます。メニュー項目を追加する場合は、bottom-slide-drawer-menu_linkクラスを付けたa要素をnav要素内へ追加します。

style.cssでは、操作エリアの最大横幅、半透明背景の濃さ、ドロワーメニューの最大高さ、内側余白、背景色、影、メニュー項目の色、角丸、開閉速度などを変更できます。

数値調整
style.css
max-width:700px;
操作エリアとドロワーメニュー内側の最大横幅です。700pxを大きくすると内容が横に広がり、小さくすると狭くなります。

padding:32px;
操作エリアの内側余白です。32pxを大きくすると内容と外枠との間隔が広がります。

border-radius:18px;
操作エリアの角丸です。18pxを大きくすると丸みが強くなります。

padding:12px 26px;
「メニューを開く」ボタンの内側余白です。12pxが上下、26pxが左右の余白です。

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

max-height:85vh;
ドロワーメニューの最大高さです。85vhは画面高さの85%を表します。値を大きくするとより高く、小さくすると低く表示できます。

padding:32px 24px;
ドロワーメニューの内側余白です。32pxが上下、24pxが左右の余白です。

transform:translateY(calc(100% + 40px));
閉じている状態のドロワーメニューを画面下へ隠す位置です。100%でドロワーメニュー自身の高さ分を移動し、さらに40px下へ配置しています。

transition:transform .3s ease, visibility .3s ease;
ドロワーメニューが開閉するときの移動時間です。.3sは0.3秒を表します。値を大きくするとゆっくり、小さくすると速く動きます。

box-shadow:0 -12px 30px rgba(15,23,42,.18);
開いたドロワーメニューの上側へ表示する影です。-12pxが縦方向の位置、30pxがぼかし量、.18が影の透明度です。

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

padding:14px 16px;
メニューリンクの内側余白です。14pxが上下、16pxが左右の余白です。

padding:12px;
「閉じる」ボタンの内側余白です。12pxを大きくするとボタンの高さが増えます。

レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。操作エリアにはwidth:100%とmax-width:700pxを設定し、画面幅に合わせて縮小します。画面下のドロワーメニューにはwidth:100%を設定しているため、スマートフォン・タブレット・PCの横幅いっぱいに表示されます。

ドロワーメニューにはmax-height:85vhとoverflow-y:autoを設定しているため、メニュー内容が多い場合も画面高さを超えすぎず、必要に応じて内部を縦スクロールできます。画面幅640px以下では@media(max-width:640px)を使用し、bodyと操作エリア、ドロワーメニューの余白を縮小しています。