如何实现类YouTube菜单：点击按钮后页面其余区域变暗不可交互

核心需求是点击按钮展开侧边菜单时，页面其余区域变暗且屏蔽交互，再次点击按钮/点击遮罩区域收回菜单恢复交互，以下方案完全保留原有代码逻辑，仅做最小增量修改即可实现效果。

实现逻辑 #

• 新增固定定位的半透明黑色遮罩层，默认隐藏
• 菜单展开时遮罩层铺满全屏，盖在所有页面内容上方，实现变暗效果，同时拦截遮罩区域的所有点击交互
• 侧边菜单和菜单按钮设置更高层级，始终显示在遮罩层上方，保证菜单区域可正常交互
• 原有滑入滑出动画逻辑完全保留，仅在切换菜单状态时同步控制遮罩层的显示/隐藏
• 追加点击遮罩层关闭菜单的逻辑，和YouTube交互逻辑一致

具体代码修改 #

1. HTML修改 #

原有页面结构完全保留，仅在.menu容器内、侧边菜单节点前新增遮罩层节点即可：

<!-- 原有headerBar、headerStrip、bodyBar、jobLinks代码全部不用动 -->
<div class='menu'>
  <button class='menuButton'></button>
  <!-- 仅新增下面这行遮罩层代码 -->
  <div class="menuOverlay"></div>
  <div class='linkList'>
    <ul>
      <li><a class='links' href='#'>Link 1</a></li>
      <li><a class='links' href='#'>Link 2</a></li>
      <li><a class='links' href='#'>Link 3</a></li>
      <li><a class='links' href='#'>Link 4</a></li>
      <li><a class='links' href='#'>Link 5</a></li>
      <li><a class='links' href='#'>Link 6</a></li>
      <li><a class='links' href='#'>Link 7</a></li>
    </ul>
  </div>
</div>

2. CSS修改 #

原有样式规则99%保留，仅删除和JS控制冲突的.menuButton:focus~.linkList { right: 0px; }规则，再追加以下新样式：

/* 遮罩层核心样式 */
.menuOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5); /* 半透明黑，透明度可自行调整 */
  z-index: 99;
  display: none; /* 默认隐藏 */
  transition: opacity 0.5s ease-out;
}

/* 菜单展开时给遮罩加active类让它显示 */
.menuOverlay.active {
  display: block;
}

/* 给菜单、按钮加高z-index，保证在遮罩上层可正常点击 */
.linkList {
  z-index: 100;
}
.menuButton {
  z-index: 101;
}

3. JS修改 #

原有菜单切换逻辑完全保留，仅追加遮罩控制、点击遮罩关菜单的逻辑，顺手给变量加声明避免全局污染：

const menuBtn = document.getElementsByClassName('menuButton')[0];
const menu = document.getElementsByClassName('linkList')[0];
const overlay = document.getElementsByClassName('menuOverlay')[0];

// 封装菜单切换逻辑，按钮、遮罩点击都能复用
function toggleMenu() {
  menu.style.webkitTransition = '0.6s';
  if (menu.style.right == '0px') {
    menu.style.right = '-150px';
    overlay.classList.remove('active'); // 关菜单同步隐藏遮罩
  } else {
    menu.style.right = '0px';
    overlay.classList.add('active'); // 开菜单同步显示遮罩
  }
}

// 原有按钮点击绑定保留
menuBtn.addEventListener('click', toggleMenu);
// 新增点击遮罩关闭菜单
overlay.addEventListener('click', toggleMenu);

内容的提问来源于stack exchange，提问作者V4N464NDR