WordPress自定义导航菜单：通过Overlay层实现点击外部关闭的教程

<div class="page-content">
  <div>
    <h1>这里是页面的主要内容</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a href="#" id="opener" onclick="toggleMenu()">打开菜单</a>
  </div>
  <!-- 导航菜单内容 -->
  <div id="navbarNavDropdown" class="collapse navbar-collapse">
    <div class="menu-main-nav-container">
        <ul id="menu-main-nav" class="menu">
            <li class="menu-item menu-item-has-children"><a>Bookmakers</a><ul class="sub-menu">...</ul></li>
            <li class="menu-item"><a>Bonuses</a></li>
            <!-- 更多菜单项 -->
            <li class="menu-item menu-item-has-children"><a>Tools</a><ul class="sub-menu">...</ul></li>
            <li class="menu-item menu-item-has-children"><a>Betting Tips</a><ul class="sub-menu">...</ul></li>
            <li class="menu-item"><a>Something</a></li>
        </ul>
    </div>
  </div>
  <!-- Overlay 层 -->
  <div id="overlay" class="overlay" onclick="toggleMenu()"></div>
</div>

/* 页面主要内容层级 */
.page-content {
  z-index: 1; /* 确保页面内容在最底层 */
}

/* Overlay 层的基本样式 */
.overlay {
  position: fixed; /* 固定定位，覆盖整个视口 */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  z-index: 2; /* 在页面内容之上，菜单之下 */
  display: none; /* 默认隐藏 */
  cursor: pointer; /* 提示用户这是一个可点击的区域 */
}

/* Overlay 显示时的样式 */
.overlay.show {
  display: block; /* 显示 Overlay */
}

/* 导航菜单的基本样式 */
#navbarNavDropdown {
  background: #fff; /* 菜单背景色 */
  width: 300px; /* 菜单宽度 */
  position: fixed; /* 固定定位 */
  right: -300px; /* 默认隐藏在屏幕右侧之外 */
  top: 0;
  height: 100%; /* 高度占满视口 */
  z-index: 3; /* 在 Overlay 之上 */
  transition: right 0.5s ease-in-out; /* 平滑的滑动动画 */
  box-shadow: -2px 0 5px rgba(0,0,0,0.2); /* 增加阴影效果 */
}

/* 导航菜单显示时的样式 */
#navbarNavDropdown.show {
  right: 0; /* 菜单滑入屏幕 */
}

/**
 * 切换导航菜单和Overlay的显示状态
 */
function toggleMenu() {
  var menu = document.getElementById('navbarNavDropdown');
  var overlay = document.getElementById('overlay');

  // 切换菜单的 'show' 类
  if (menu.classList.contains('show')) {
    menu.classList.remove('show');
  } else {
    menu.classList.add('show');
  }

  // 同步切换 Overlay 的 'show' 类
  if (overlay.classList.contains('show')) {
    overlay.classList.remove('show');
  } else {
    overlay.classList.add('show');
  }
}

// 绑定菜单打开按钮的点击事件
document.getElementById('opener').addEventListener('click', function(event) {
  event.preventDefault(); // 阻止默认的链接跳转行为
  toggleMenu();
});

// 绑定 Overlay 的点击事件（已在HTML中通过onclick="toggleMenu()"实现）
// 也可以通过JS绑定，例如：
// document.getElementById('overlay').addEventListener('click', toggleMenu);