如何添加Esc键关闭桌面端全屏覆盖式汉堡导航菜单

要实现按下Esc键关闭你的全屏覆盖菜单，只需要添加一个键盘事件监听器，配合你已有的closeNav()函数即可。下面是具体的实现步骤和代码：

1. 核心JavaScript逻辑 #

我们需要监听全局的键盘按下事件，当检测到用户按下Esc键时，调用关闭菜单的函数。同时要确保只有菜单处于打开状态时才触发这个操作：

// 监听键盘按下事件
document.addEventListener('keydown', function(event) {
  // 兼容新旧浏览器的Esc键判断
  const isEscapeKey = event.key === 'Escape' || event.keyCode === 27;
  
  if (isEscapeKey) {
    const overlayMenu = document.getElementById('myNav');
    // 这里的判断条件要和你的菜单打开逻辑匹配
    // 假设菜单打开时会添加"active"类，你可以根据自己的样式调整
    if (overlayMenu.classList.contains('active')) {
      closeNav();
    }
  }
});

2. 配合你的菜单控制函数（如果还没有的话） #

如果你还没定义openNav()和closeNav()，这里给你一个基础示例，和常见的全屏菜单样式逻辑匹配：

// 打开菜单：给overlay添加active类来展开宽度
function openNav() {
  document.getElementById('myNav').classList.add('active');
}

// 关闭菜单：移除active类收起菜单
function closeNav() {
  document.getElementById('myNav').classList.remove('active');
}

对应的基础CSS样式参考（确保菜单的显示/隐藏逻辑正常）：

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.9);
  overflow-x: hidden;
  transition: width 0.5s ease;
}

.overlay.active {
  width: 100%;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

关键说明 #

• 事件监听绑定在document上，这样用户不管焦点在页面哪个位置，按下Esc都能触发关闭。
• 一定要判断菜单是否处于打开状态（比如检查active类），避免菜单已经关闭时重复调用关闭函数。
• event.key === 'Escape'是现代浏览器的标准写法，event.keyCode === 27是为了兼容一些旧浏览器，两者结合更稳妥。

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