js实现菜单按钮

2026-03-16 08:33:38JavaScript

实现菜单按钮的JavaScript方法

HTML结构 创建一个基本的HTML结构，包含菜单按钮和菜单内容：

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

CSS样式 添加基础样式控制菜单显示/隐藏：

.hidden {
  display: none;
}

#menuList {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #f9f9f9;
  border: 1px solid #ddd;
  width: 200px;
}

#menuList li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
}

#menuList li a:hover {
  background: #ddd;
}

JavaScript逻辑 使用事件监听器实现菜单切换：

js实现菜单按钮

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

menuButton.addEventListener('click', function() {
  menuList.classList.toggle('hidden');
});

// 点击页面其他区域关闭菜单
document.addEventListener('click', function(event) {
  if (!menuButton.contains(event.target) && !menuList.contains(event.target)) {
    menuList.classList.add('hidden');
  }
});

实现动画效果的菜单按钮

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

#menuList {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#menuList.show {
  opacity: 1;
  transform: translateY(0);
  display: block;
}

JavaScript修改 更新JavaScript逻辑以配合CSS动画：

js实现菜单按钮

menuButton.addEventListener('click', function() {
  menuList.classList.toggle('show');
  if (menuList.classList.contains('show')) {
    menuList.style.display = 'block';
  } else {
    setTimeout(() => {
      menuList.style.display = 'none';
    }, 300); // 匹配CSS过渡时间
  }
});

响应式菜单实现

媒体查询调整 针对移动设备优化菜单样式：

@media (max-width: 768px) {
  #menuList {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(-100%);
  }

  #menuList.show {
    transform: translateX(0);
  }
}

JavaScript增强 添加移动设备特有的交互：

const isMobile = window.matchMedia('(max-width: 768px)').matches;

if (isMobile) {
  const closeButton = document.createElement('button');
  closeButton.textContent = '×';
  closeButton.className = 'close-menu';
  menuList.prepend(closeButton);

  closeButton.addEventListener('click', function() {
    menuList.classList.remove('show');
    setTimeout(() => {
      menuList.style.display = 'none';
    }, 300);
  });
}