ドロップダウンメニューを開いた時の背景をぼかしたり暗くしたりする方法

ボタン・メニュー項目・サイズ・色・余白・枠線などを設定して、HTML・CSS・JavaScriptを自動生成できます。

ドロップダウンメニューを開いたときに、背景をぼかしたり暗くしたりする方法を紹介します。メニューの背後に半透明のレイヤー（オーバーレイ）を重ねることで、背景の見え方を変え、開いているメニューを目立たせることができます。

今回は「背景をぼかす」「背景を暗くする」の2種類を比較します。背景をぼかすタイプでは、背後にある文字やカードの輪郭がぼやけ、内容が読み取りにくくなります。一方、背景を暗くするタイプでは、半透明の黒いレイヤーによって背景全体が薄暗くなります。どちらもメニュー本体には効果を適用せず、文字やリンクをはっきり表示します。

デモでは、2種類のドロップダウンメニューを縦に配置しています。それぞれの「メニューを開く」ボタンをクリックすると、メニューの表示と同時に背景の見え方が変化します。もう一度ボタンをクリックするか、メニューの外側をクリックすると閉じ、背景も元の状態に戻ります。Escキーでも閉じることができます。

オーバーレイにはCSSのbackdrop-filterによるぼかし効果と、半透明の背景色による暗転効果を使用しています。ぼかしの強さや背景の暗さはCSSの数値で調整でき、具体的な変更方法は「ファイル構成と設置方法」で説明します。

デモ

①はメニューを開くと背景の文字やカードがぼかされ、②は背景全体が半透明の黒で暗くなります。どちらもメニュー自体は通常の明るさで表示されます。メニューの外側をクリックするか、Escキーを押すと閉じます。背景の変化は、それぞれのデモ領域内で確認できます。

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

① 背景をぼかすドロップダウンメニュー

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

  <!--
    【ぼかし効果の確認用テキスト】
    以下のp要素は動作確認用です。
    実際のサイトへ設置する際は、このコメントから
    「確認用テキストここまで」までを削除してください。
  -->
  <p style="margin: 180px auto 0; text-align: center; font-size: 48px; font-weight: 700; color: #111827;">
    ぼかし効果の確認用テキスト
  </p>
  <!-- 確認用テキストここまで -->

  <!-- 背景をぼかすオーバーレイ -->
  <div class="dropdown-background-effects-blur_overlay" aria-hidden="true"></div>

  <!-- ドロップダウンメニュー全体 -->
  <div class="dropdown-background-effects-blur_wrap">

    <!-- メニューを開閉するボタン -->
    <button
      class="dropdown-background-effects-blur_button"
      type="button"
      aria-expanded="false"
      aria-controls="dropdown-background-effects-blur-menu"
    >
      メニューを開く
      <span class="dropdown-background-effects-blur_arrow" aria-hidden="true">▼</span>
    </button>

    <!-- ドロップダウンメニュー -->
    <ul
      class="dropdown-background-effects-blur_menu"
      id="dropdown-background-effects-blur-menu"
      hidden
    >
      <!-- hrefには設置先に合わせたリンク先を指定してください -->
      <li><a href="#home">ホーム</a></li>
      <li><a href="#profile">プロフィール</a></li>
      <li><a href="#contact">お問い合わせ</a></li>
    </ul>

  </div>

  <!-- ドロップダウンメニューの開閉処理を読み込む -->
  <script src="script.js"></script>
</body>
</html>

/* =========================================
   背景をぼかすオーバーレイ
========================================= */

.dropdown-background-effects-blur_overlay {
  position: fixed; /* ブラウザ画面に固定する */
  inset: 0; /* 画面の上下左右いっぱいに広げる */
  z-index: 1000; /* 通常のページコンテンツより前面に表示する */
  background: rgba(255, 255, 255, 0.15); /* 白い半透明の背景。0.15を変更すると白さが変わる */
  backdrop-filter: blur(12px); /* 背景を12pxぼかす。大きくするとぼかしが強くなる */
  -webkit-backdrop-filter: blur(12px); /* Safari向けのぼかし設定 */
  opacity: 0; /* 閉じているときは透明にする */
  visibility: hidden; /* 閉じているときは非表示にする */
  pointer-events: none; /* 閉じているときは背後の操作を妨げない */
  transition: opacity 0.25s ease, visibility 0.25s ease; /* 0.25秒で表示状態を切り替える */
}

/* メニューが開いたときにオーバーレイを表示 */
.dropdown-background-effects-blur_overlay.is-active {
  opacity: 1; /* オーバーレイを表示する */
  visibility: visible; /* 表示状態に切り替える */
  pointer-events: auto; /* 背景クリックを受け付ける */
}

/* =========================================
   ドロップダウンメニューの配置
========================================= */

.dropdown-background-effects-blur_wrap {
  position: fixed; /* スクロールしても画面内の同じ位置に固定する */
  top: 72px; /* 画面上端から72px下に配置する */
  left: 50%; /* 左端を画面中央へ移動する */
  z-index: 1001; /* オーバーレイより前面に表示する */
  width: 220px; /* ボタンとメニューの横幅 */
  max-width: calc(100vw - 32px); /* 画面左右に最低16pxずつ余白を確保する */
  transform: translateX(-50%); /* 要素自身の横幅の半分を戻して中央揃えにする */
  font-family: sans-serif; /* メニュー全体のフォント */
  box-sizing: border-box; /* 横幅に余白と枠線を含める */
}

/* =========================================
   メニュー開閉ボタン
========================================= */

.dropdown-background-effects-blur_button {
  display: flex; /* 文字と矢印を横並びにする */
  align-items: center; /* 上下中央に揃える */
  justify-content: space-between; /* 文字と矢印を左右に配置する */
  gap: 12px; /* 文字と矢印の間隔 */
  width: 100%; /* 親要素の横幅いっぱいに広げる */
  padding: 13px 18px; /* 上下13px・左右18pxの内側余白 */
  border: none; /* 標準の枠線をなくす */
  border-radius: 10px; /* 角丸。大きくすると丸みが強くなる */
  background: #2563eb; /* ボタンの背景色 */
  color: #ffffff; /* ボタンの文字色 */
  font-family: inherit; /* 親要素のフォントを引き継ぐ */
  font-size: 15px; /* ボタンの文字サイズ */
  font-weight: 700; /* ボタンの文字の太さ */
  line-height: 1.5; /* 文字の行の高さ */
  cursor: pointer; /* マウスを重ねると指の形にする */
  box-sizing: border-box; /* 横幅に余白を含める */
}

/* ボタンにマウスを重ねたとき */
.dropdown-background-effects-blur_button:hover {
  background: #1d4ed8; /* ホバー時の背景色 */
}

/* キーボードでボタンを選択したとき */
.dropdown-background-effects-blur_button:focus-visible {
  outline: 3px solid #93c5fd; /* フォーカス枠。3pxを変更すると太さが変わる */
  outline-offset: 3px; /* ボタンとフォーカス枠の間隔 */
}

/* =========================================
   ボタンの矢印
========================================= */

.dropdown-background-effects-blur_arrow {
  font-size: 12px; /* 矢印の文字サイズ */
  transition: transform 0.2s ease; /* 0.2秒で矢印を回転させる */
}

/* メニューが開いているときの矢印 */
.dropdown-background-effects-blur_button[aria-expanded="true"] .dropdown-background-effects-blur_arrow {
  transform: rotate(180deg); /* 矢印を180度回転させる */
}

/* =========================================
   ドロップダウンメニュー
========================================= */

.dropdown-background-effects-blur_menu {
  position: absolute; /* ボタンを基準に配置する */
  top: calc(100% + 8px); /* ボタンの下から8px離して表示する */
  left: 0; /* ボタンの左端に揃える */
  width: 100%; /* ボタンと同じ横幅にする */
  margin: 0; /* 標準の外側余白をなくす */
  padding: 6px; /* メニュー内側の余白 */
  border: 1px solid #e5e7eb; /* メニューの枠線 */
  border-radius: 10px; /* メニューの角丸 */
  background: #ffffff; /* メニューの背景色 */
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16); /* 下方向10px・ぼかし28pxの影 */
  list-style: none; /* 箇条書きのマーカーをなくす */
  box-sizing: border-box; /* 横幅に余白と枠線を含める */
}

/* hidden属性があるときはメニューを非表示 */
.dropdown-background-effects-blur_menu[hidden] {
  display: none;
}

/* メニュー項目の標準スタイルを解除 */
.dropdown-background-effects-blur_menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =========================================
   メニュー内のリンク
========================================= */

.dropdown-background-effects-blur_menu a {
  display: block; /* リンク全体をクリックできるようにする */
  padding: 11px 12px; /* 上下11px・左右12pxの内側余白 */
  border-radius: 6px; /* リンクの角丸 */
  color: #334155; /* リンクの文字色 */
  font-size: 14px; /* リンクの文字サイズ */
  line-height: 1.5; /* 文字の行の高さ */
  text-decoration: none; /* 下線をなくす */
}

/* マウス操作・キーボード操作時のリンク */
.dropdown-background-effects-blur_menu a:hover,
.dropdown-background-effects-blur_menu a:focus-visible {
  background: #eff6ff; /* 選択中の背景色 */
  color: #1d4ed8; /* 選択中の文字色 */
}

/* =========================================
   スマートフォン対応
========================================= */

@media (max-width: 640px) {

  /* 画面幅640px以下ではボタンの位置を少し上げる */
  .dropdown-background-effects-blur_wrap {
    top: 48px; /* 画面上端から48px下に配置する */
  }

}

/* =========================================
   背景をぼかすドロップダウンメニュー
========================================= */

(function() {

  // メニューを開閉するボタンを取得
  const button = document.querySelector(
    ".dropdown-background-effects-blur_button"
  );

  // ドロップダウンメニューを取得
  const menu = document.getElementById(
    "dropdown-background-effects-blur-menu"
  );

  // 背景をぼかすオーバーレイを取得
  const overlay = document.querySelector(
    ".dropdown-background-effects-blur_overlay"
  );

  // メニューを開く
  function openMenu() {

    // メニューを表示する
    menu.hidden = false;

    // ボタンの開閉状態を更新する
    button.setAttribute("aria-expanded", "true");

    // 背景のぼかしを表示する
    overlay.classList.add("is-active");

  }

  // メニューを閉じる
  function closeMenu() {

    // メニューを非表示にする
    menu.hidden = true;

    // ボタンの開閉状態を更新する
    button.setAttribute("aria-expanded", "false");

    // 背景のぼかしを解除する
    overlay.classList.remove("is-active");

  }

  // ボタンをクリックするとメニューを開閉する
  button.addEventListener("click", function() {

    if (menu.hidden) {
      openMenu();
    } else {
      closeMenu();
    }

  });

  // オーバーレイをクリックするとメニューを閉じる
  overlay.addEventListener("click", function() {
    closeMenu();
  });

  // Escキーでメニューを閉じる
  document.addEventListener("keydown", function(event) {

    if (event.key === "Escape" && !menu.hidden) {
      closeMenu();
      button.focus();
    }

  });

})();

② 背景を暗くするドロップダウンメニュー

<!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="dropdown-background-effects-dark_overlay" aria-hidden="true"></div>

  <!-- ドロップダウンメニュー全体 -->
  <div class="dropdown-background-effects-dark_wrap">

    <!-- メニューを開閉するボタン -->
    <button
      class="dropdown-background-effects-dark_button"
      type="button"
      aria-expanded="false"
      aria-controls="dropdown-background-effects-dark-menu"
    >
      メニューを開く
      <span class="dropdown-background-effects-dark_arrow" aria-hidden="true">▼</span>
    </button>

    <!-- ドロップダウンメニュー -->
    <ul
      class="dropdown-background-effects-dark_menu"
      id="dropdown-background-effects-dark-menu"
      hidden
    >
      <!-- hrefには設置先に合わせたリンク先を指定してください -->
      <li><a href="#home">ホーム</a></li>
      <li><a href="#profile">プロフィール</a></li>
      <li><a href="#contact">お問い合わせ</a></li>
    </ul>

  </div>

  <!-- ドロップダウンメニューの開閉処理を読み込む -->
  <script src="script.js"></script>
</body>
</html>

/* =========================================
   背景を暗くするオーバーレイ
========================================= */

.dropdown-background-effects-dark_overlay {
  position: fixed; /* ブラウザ画面に固定する */
  inset: 0; /* 画面の上下左右いっぱいに広げる */
  z-index: 1000; /* 通常のページコンテンツより前面に表示する */
  background: rgba(0, 0, 0, 0.5); /* 黒い半透明の背景。0.5を大きくすると暗くなる */
  opacity: 0; /* 閉じているときは透明にする */
  visibility: hidden; /* 閉じているときは非表示にする */
  pointer-events: none; /* 閉じているときは背後の操作を妨げない */
  transition: opacity 0.25s ease, visibility 0.25s ease; /* 0.25秒で表示状態を切り替える */
}

/* メニューが開いたときにオーバーレイを表示 */
.dropdown-background-effects-dark_overlay.is-active {
  opacity: 1; /* オーバーレイを表示する */
  visibility: visible; /* 表示状態に切り替える */
  pointer-events: auto; /* 背景クリックを受け付ける */
}

/* =========================================
   ドロップダウンメニューの配置
========================================= */

.dropdown-background-effects-dark_wrap {
  position: fixed; /* スクロールしても画面内の同じ位置に固定する */
  top: 72px; /* 画面上端から72px下に配置する */
  left: 50%; /* 左端を画面中央へ移動する */
  z-index: 1001; /* オーバーレイより前面に表示する */
  width: 220px; /* ボタンとメニューの横幅 */
  max-width: calc(100vw - 32px); /* 画面左右に最低16pxずつ余白を確保する */
  transform: translateX(-50%); /* 要素自身の横幅の半分を戻して中央揃えにする */
  font-family: sans-serif; /* メニュー全体のフォント */
  box-sizing: border-box; /* 横幅に余白と枠線を含める */
}

/* =========================================
   メニュー開閉ボタン
========================================= */

.dropdown-background-effects-dark_button {
  display: flex; /* 文字と矢印を横並びにする */
  align-items: center; /* 上下中央に揃える */
  justify-content: space-between; /* 文字と矢印を左右に配置する */
  gap: 12px; /* 文字と矢印の間隔 */
  width: 100%; /* 親要素の横幅いっぱいに広げる */
  padding: 13px 18px; /* 上下13px・左右18pxの内側余白 */
  border: none; /* 標準の枠線をなくす */
  border-radius: 10px; /* 角丸。大きくすると丸みが強くなる */
  background: #2563eb; /* ボタンの背景色 */
  color: #ffffff; /* ボタンの文字色 */
  font-family: inherit; /* 親要素のフォントを引き継ぐ */
  font-size: 15px; /* ボタンの文字サイズ */
  font-weight: 700; /* ボタンの文字の太さ */
  line-height: 1.5; /* 文字の行の高さ */
  cursor: pointer; /* マウスを重ねると指の形にする */
  box-sizing: border-box; /* 横幅に余白を含める */
}

/* ボタンにマウスを重ねたとき */
.dropdown-background-effects-dark_button:hover {
  background: #1d4ed8; /* ホバー時の背景色 */
}

/* キーボードでボタンを選択したとき */
.dropdown-background-effects-dark_button:focus-visible {
  outline: 3px solid #93c5fd; /* フォーカス枠。3pxを変更すると太さが変わる */
  outline-offset: 3px; /* ボタンとフォーカス枠の間隔 */
}

/* =========================================
   ボタンの矢印
========================================= */

.dropdown-background-effects-dark_arrow {
  font-size: 12px; /* 矢印の文字サイズ */
  transition: transform 0.2s ease; /* 0.2秒で矢印を回転させる */
}

/* メニューが開いているときの矢印 */
.dropdown-background-effects-dark_button[aria-expanded="true"] .dropdown-background-effects-dark_arrow {
  transform: rotate(180deg); /* 矢印を180度回転させる */
}

/* =========================================
   ドロップダウンメニュー
========================================= */

.dropdown-background-effects-dark_menu {
  position: absolute; /* ボタンを基準に配置する */
  top: calc(100% + 8px); /* ボタンの下から8px離して表示する */
  left: 0; /* ボタンの左端に揃える */
  width: 100%; /* ボタンと同じ横幅にする */
  margin: 0; /* 標準の外側余白をなくす */
  padding: 6px; /* メニュー内側の余白 */
  border: 1px solid #e5e7eb; /* メニューの枠線 */
  border-radius: 10px; /* メニューの角丸 */
  background: #ffffff; /* メニューの背景色 */
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16); /* 下方向10px・ぼかし28pxの影 */
  list-style: none; /* 箇条書きのマーカーをなくす */
  box-sizing: border-box; /* 横幅に余白と枠線を含める */
}

/* hidden属性があるときはメニューを非表示 */
.dropdown-background-effects-dark_menu[hidden] {
  display: none;
}

/* メニュー項目の標準スタイルを解除 */
.dropdown-background-effects-dark_menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =========================================
   メニュー内のリンク
========================================= */

.dropdown-background-effects-dark_menu a {
  display: block; /* リンク全体をクリックできるようにする */
  padding: 11px 12px; /* 上下11px・左右12pxの内側余白 */
  border-radius: 6px; /* リンクの角丸 */
  color: #334155; /* リンクの文字色 */
  font-size: 14px; /* リンクの文字サイズ */
  line-height: 1.5; /* 文字の行の高さ */
  text-decoration: none; /* 下線をなくす */
}

/* マウス操作・キーボード操作時のリンク */
.dropdown-background-effects-dark_menu a:hover,
.dropdown-background-effects-dark_menu a:focus-visible {
  background: #eff6ff; /* 選択中の背景色 */
  color: #1d4ed8; /* 選択中の文字色 */
}

/* =========================================
   スマートフォン対応
========================================= */

@media (max-width: 640px) {

  /* 画面幅640px以下ではボタンの位置を少し上げる */
  .dropdown-background-effects-dark_wrap {
    top: 48px; /* 画面上端から48px下に配置する */
  }

}

/* =========================================
   背景を暗くするドロップダウンメニュー
========================================= */

(function() {

  // メニューを開閉するボタンを取得
  const button = document.querySelector(
    ".dropdown-background-effects-dark_button"
  );

  // ドロップダウンメニューを取得
  const menu = document.getElementById(
    "dropdown-background-effects-dark-menu"
  );

  // 背景を暗くするオーバーレイを取得
  const overlay = document.querySelector(
    ".dropdown-background-effects-dark_overlay"
  );

  // メニューを開く
  function openMenu() {

    // メニューを表示する
    menu.hidden = false;

    // ボタンの開閉状態を更新する
    button.setAttribute("aria-expanded", "true");

    // 背景を暗くする
    overlay.classList.add("is-active");

  }

  // メニューを閉じる
  function closeMenu() {

    // メニューを非表示にする
    menu.hidden = true;

    // ボタンの開閉状態を更新する
    button.setAttribute("aria-expanded", "false");

    // 背景の暗転を解除する
    overlay.classList.remove("is-active");

  }

  // ボタンをクリックするとメニューを開閉する
  button.addEventListener("click", function() {

    if (menu.hidden) {
      openMenu();
    } else {
      closeMenu();
    }

  });

  // オーバーレイをクリックするとメニューを閉じる
  overlay.addEventListener("click", function() {
    closeMenu();
  });

  // Escキーでメニューを閉じる
  document.addEventListener("keydown", function(event) {

    if (event.key === "Escape" && !menu.hidden) {
      closeMenu();
      button.focus();
    }

  });

})();

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

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

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルでは、ドロップダウンメニューを開いたときに、ブラウザ画面全体へオーバーレイを表示します。「背景をぼかす」と「背景を暗くする」の2種類を用意しており、それぞれ独立したHTML・CSS・JavaScriptの3ファイルで動作します。目的に合うコードカードからサンプル一式をダウンロードしてください。 2種類を同時に設置する必要はありません。

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

各ファイルの役割
index.htmlには、背景用のオーバーレイ、メニュー開閉ボタン、リンク一覧を記述しています。 style.cssでは、オーバーレイの表示効果、メニューの配置、ボタンやリンクのデザインを設定します。 script.jsは、ボタン操作に応じたメニューの開閉とオーバーレイの表示・非表示を制御します。 2種類ともファイル名と構成は共通ですが、CSSの背景効果とHTML・JavaScriptのクラス名が異なります。

設置方法・使い方
使用したいコードカードの「サンプル一式をダウンロード」をクリックし、ZIPファイルを展開してください。生成されるsampleフォルダ内の3ファイルを同じ階層に配置したまま、index.htmlをブラウザで開くと動作を確認できます。 Webサイトへ組み込む場合は、HTML本体を設置先のページへ配置し、CSSとJavaScriptを読み込んでください。メニューのリンク先は、index.htmlにある各a要素のhref属性を実際のURLやページ内IDへ変更します。「メニューを開く」をクリックすると背景効果が表示され、もう一度クリックするか、背景をクリックすると閉じます。 Escキーでも閉じることができます。なお、ぼかし効果の確認用テキストは動作確認のために追加した要素なので、実際のサイトへ設置する際は、HTML内の「ぼかし効果の確認用テキスト」から「確認用テキストここまで」までを削除してください。

背景全体に効果を適用する仕組み
オーバーレイにはposition: fixedとinset: 0を指定しています。これにより、ページのスクロール位置に関係なく、ブラウザ画面の上下左右を覆う領域が作られます。メニュー側にはオーバーレイより大きいz-indexを指定しているため、背景だけに効果が適用され、ボタンやメニューの文字は通常の明るさで表示されます。

/* 背景用オーバーレイの配置 */
position: fixed;
inset: 0;
z-index: 1000;

/* ドロップダウンメニューの配置 */
position: fixed;
top: 72px;
left: 50%;
z-index: 1001;
width: 220px;
transform: translateX(-50%);

メニューは画面上端から72px下の中央に配置しています。 topを変更すると上下の位置を調整でき、width: 220pxを変更するとボタンとメニューの横幅が変わります。 left: 50%とtranslateX(-50%)を組み合わせることで、画面幅が変わっても中央に配置されます。

背景をぼかす方法
①のサンプルでは、オーバーレイにbackdrop-filterを使用しています。このプロパティは、オーバーレイ自体ではなく、その背後に表示されている文字や画像などへぼかし効果を適用します。白い背景だけでは変化が分かりにくいため、文字や画像があるページで確認すると効果を判断しやすくなります。

background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);

blur(12px)の数値がぼかしの強さです。例えばblur(20px)にするとさらに強くぼかされ、blur(4px)にすると控えめになります。 -webkit-backdrop-filterはSafari向けの指定なので、ぼかしの数値を変更するときは両方を同じ値にしてください。 rgba(255, 255, 255, 0.15)はオーバーレイに重ねる白色の透明度で、最後の0.15を大きくすると背景が白っぽくなります。

背景を暗くする方法
②のサンプルでは、ぼかし効果を使わず、半透明の黒い背景色をオーバーレイに設定しています。背景の文字や画像の形を残したまま全体を暗くするため、開いているメニューを強調できます。

background: rgba(0, 0, 0, 0.5);

最後の0.5が黒色の透明度です。 0に近づけると背景が明るくなり、1に近づけると黒くなります。例えば0.3なら薄めの暗転、0.7なら強めの暗転になります。この設定は②のstyle.cssにあり、①のぼかし効果とは独立して変更できます。

メニューの開閉と背景効果の切り替え
JavaScriptでは、メニューを開くときにhiddenを解除し、ボタンのaria-expandedをtrueに変更します。同時にオーバーレイへis-activeクラスを追加することで、背景効果が表示されます。閉じるときはこれらの状態を元に戻します。

// メニューを開く
function openMenu() {

  // メニューを表示する
  menu.hidden = false;

  // ボタンの開閉状態を更新する
  button.setAttribute("aria-expanded", "true");

  // 背景の効果を表示する
  overlay.classList.add("is-active");

}

// メニューを閉じる
function closeMenu() {

  // メニューを非表示にする
  menu.hidden = true;

  // ボタンの開閉状態を更新する
  button.setAttribute("aria-expanded", "false");

  // 背景の効果を解除する
  overlay.classList.remove("is-active");

}

①と②ではコメントの表現が異なりますが、開閉処理の仕組みは同じです。オーバーレイのis-activeクラスを追加・削除するだけで背景効果を切り替えられるため、ぼかしと暗転の違いは主にCSS側で管理できます。また、オーバーレイのクリックイベントとkeydownイベントによって、背景クリックやEscキーで閉じる操作にも対応しています。

オーバーレイの表示速度
オーバーレイは、通常時にopacity: 0とvisibility: hiddenで非表示になっています。 is-activeが追加されると透明度が切り替わり、背景効果が表示されます。

transition: opacity 0.25s ease, visibility 0.25s ease;

0.25sは表示状態が切り替わる時間です。数値を大きくするとゆっくり変化し、小さくすると素早く変化します。 ①のぼかし効果と②の暗転効果で、それぞれ異なる時間を指定することもできます。

レスポンシブ対応
ボタンとメニューにはmax-width: calc(100vw - 32px)を指定し、狭い画面でも左右に余白を確保しています。また、画面幅が640px以下になると、メニューの上位置を72pxから48pxへ変更します。これにより、スマートフォンでは画面上部のスペースを抑えてメニューを表示できます。変更する場合は、それぞれのstyle.cssにあるメディアクエリ内のtopを調整してください。