当前位置：首页 > JavaScript

js实现菜单

2026-02-28 21:21:17JavaScript

实现基础HTML结构

使用HTML创建菜单的基本框架，通常包含<ul>和<li>元素。以下是一个简单示例：

<ul id="menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">关于我们</a></li>
</ul>

添加CSS样式

通过CSS美化菜单，例如水平导航栏或下拉菜单样式：

#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  background-color: #333;
}
#menu li {
  position: relative;
}
#menu li a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
}
#menu li a:hover {
  background-color: #555;
}

实现下拉菜单功能

使用JavaScript为菜单添加交互效果，如点击展开子菜单：

js实现菜单

document.querySelectorAll('#menu li').forEach(item => {
  if (item.querySelector('ul')) {
    item.addEventListener('click', (e) => {
      e.stopPropagation();
      item.querySelector('ul').classList.toggle('active');
    });
  }
});

对应的CSS需添加子菜单样式：

#menu ul {
  display: none;
  position: absolute;
  background-color: #444;
  width: 200px;
}
#menu ul.active {
  display: block;
}

响应式菜单适配

通过媒体查询和JavaScript实现移动端适配。例如在小屏幕下切换为汉堡菜单：

js实现菜单

const menuToggle = document.createElement('div');
menuToggle.className = 'menu-toggle';
document.body.prepend(menuToggle);
menuToggle.addEventListener('click', () => {
  document.getElementById('menu').classList.toggle('mobile-active');
});

CSS补充：

.menu-toggle {
  display: none;
  cursor: pointer;
}
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  #menu {
    flex-direction: column;
    display: none;
  }
  #menu.mobile-active {
    display: flex;
  }
}

动画效果增强

使用CSS过渡或动画提升交互体验：

#menu li a {
  transition: background-color 0.3s ease;
}
#menu ul {
  transition: opacity 0.3s, transform 0.3s;
  opacity: 0;
  transform: translateY(-10px);
}
#menu ul.active {
  opacity: 1;
  transform: translateY(0);
}

键盘导航支持

为无障碍访问添加键盘操作支持：

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