js实现菜单

2026-01-15 14:55:46JavaScript

实现基本HTML结构

使用HTML创建菜单的基本框架，通常包含<ul>和<li>元素。示例结构如下：

<ul id="menu">
  <li><a href="#home">Home</a></li>
  <li><a href="#services">Services</a></li>
  <li><a href="#about">About</a></li>
</ul>

添加CSS样式

通过CSS为菜单添加基础样式，例如水平或垂直布局、悬停效果等：

js实现菜单

#menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex; /* 水平菜单 */
}
#menu li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
}
#menu li a:hover {
  background-color: #eee;
}

实现下拉菜单功能

通过JavaScript动态控制下拉菜单的显示/隐藏：

document.querySelectorAll('#menu li').forEach(item => {
  if (item.querySelector('ul')) {
    item.addEventListener('mouseenter', () => {
      item.querySelector('ul').style.display = 'block';
    });
    item.addEventListener('mouseleave', () => {
      item.querySelector('ul').style.display = 'none';
    });
  }
});

响应式菜单实现

使用JavaScript和CSS媒体查询实现移动端适配：

js实现菜单

const menuToggle = document.createElement('button');
menuToggle.textContent = 'Menu';
document.body.prepend(menuToggle);

menuToggle.addEventListener('click', () => {
  const menu = document.getElementById('menu');
  menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
});

添加动画效果

通过CSS transitions或JavaScript实现平滑的菜单动画：

#menu li ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
#menu li:hover ul {
  max-height: 500px; /* 足够大的值容纳内容 */
}

键盘导航支持

为菜单添加无障碍访问支持：

document.querySelectorAll('#menu a').forEach(link => {
  link.addEventListener('keydown', e => {
    if (e.key === 'Enter') {
      e.target.click();
    }
  });
});