js实现菜单按钮

2026-02-03 07:30:50JavaScript

实现基础菜单按钮

使用HTML和CSS创建菜单按钮结构，通过JavaScript控制显示/隐藏：

<button id="menuButton">菜单</button>
<div id="menuContent" class="hidden">
  <a href="#">选项1</a>
  <a href="#">选项2</a>
  <a href="#">选项3</a>
</div>

.hidden {
  display: none;
}
#menuContent {
  position: absolute;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

const menuButton = document.getElementById('menuButton');
const menuContent = document.getElementById('menuContent');

menuButton.addEventListener('click', () => {
  menuContent.classList.toggle('hidden');
});

添加动画效果

为菜单显示/隐藏添加平滑过渡效果：

#menuContent {
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(-10px);
}
#menuContent.show {
  opacity: 1;
  transform: translateY(0);
}

修改JavaScript切换逻辑：

menuButton.addEventListener('click', () => {
  menuContent.classList.toggle('show');
});

点击外部关闭菜单

实现点击菜单外部区域关闭菜单的功能：

document.addEventListener('click', (event) => {
  const isClickInside = menuContent.contains(event.target) || 
                       menuButton.contains(event.target);

  if (!isClickInside && menuContent.classList.contains('show')) {
    menuContent.classList.remove('show');
  }
});

响应式菜单实现

根据屏幕宽度切换菜单样式（移动端/桌面端）：

function handleResponsiveMenu() {
  if (window.innerWidth < 768) {
    // 移动端样式
    menuContent.style.width = '100%';
  } else {
    // 桌面端样式
    menuContent.style.width = '200px';
  }
}

window.addEventListener('resize', handleResponsiveMenu);
handleResponsiveMenu(); // 初始化调用

键盘可访问性

增强键盘导航支持：

js实现菜单按钮

menuButton.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    menuContent.classList.toggle('show');
  }
});

menuContent.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    menuContent.classList.remove('show');
    menuButton.focus();
  }
});

这些实现方法可以根据具体需求进行组合或扩展，创建出功能完善且用户体验良好的菜单按钮。