WordPress自定义导航栏外部点击关闭功能实现教程

<div class="page-content">
  <div>
    <h1>这里是您的正常页面内容</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <!-- 菜单开关按钮，点击时调用 toggleMenu() -->
    <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">
                    <li><a href="#">toto</a></li>
                    <!-- 更多子菜单项 -->
                </ul>
            </li>
            <li class="menu-item"><a href="#">Bonuses</a></li>
            <!-- 更多主菜单项 -->
            <li class="menu-item menu-item-has-children">
                <a>Tools</a>
                <ul class="sub-menu">
                    <li><a href="#">System Bets Calculator</a></li>
                    <!-- 更多子菜单项 -->
                </ul>
            </li>
        </ul>
    </div>
  </div>

  <!-- 叠加层，用于捕获外部点击事件 -->
  <div id="overlay" class="overlay" onclick="toggleMenu()"></div>
</div>

/* 确保页面内容在叠加层之下 */
.page-content {
  position: relative; /* 确保子元素的z-index相对其生效 */
  z-index: 1;
}

/* 叠加层样式 */
.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; /* 默认隐藏 */
}

/* 叠加层显示状态 */
.overlay.show {
  display: block; /* 显示叠加层 */
}

/* 主导航菜单样式 */
#navbarNavDropdown {
  background: #fff; /* 白色背景 */
  width: 300px; /* 菜单宽度 */
  position: fixed; /* 固定定位 */
  right: -300px; /* 默认隐藏在视口右侧之外 */
  top: 0;
  height: 100%; /* 高度占满视口 */
  z-index: 3; /* 位于叠加层之上 */
  transition: right 0.5s ease-in-out; /* 平滑的滑动动画 */
  box-shadow: -2px 0 5px rgba(0,0,0,0.2); /* 添加阴影增加立体感 */
  overflow-y: auto; /* 如果菜单内容过多，允许滚动 */
}

/* 主导航菜单显示状态 */
#navbarNavDropdown.show {
  right: 0; /* 菜单滑入视口 */
}

/**
 * 切换主导航菜单和叠加层的显示/隐藏状态
 */
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');
  }

  // 切换叠加层的 'show' 类
  if (overlay.classList.contains('show')) {
    overlay.classList.remove('show');
  } else {
    overlay.classList.add('show');
  }
}

// 建议在DOM加载完成后再执行脚本
document.addEventListener('DOMContentLoaded', () => {
    // 如果有其他需要初始化的JS，可以在这里添加
    // 例如，为菜单打开按钮添加事件监听器 (如果不是直接在HTML中用onclick)
    // document.getElementById('opener').addEventListener('click', toggleMenu);
});