css菜单制作小结

基础菜单结构

使用HTML的无序列表<ul>构建菜单框架，每个<li>代表一个菜单项。结构清晰且语义化，便于SEO和屏幕阅读器识别。

<ul class="menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
</ul>

水平导航栏样式

通过display: inline-block或flex布局实现横向排列。移除列表默认样式，添加间距和悬停效果增强交互性。

.menu {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 20px;
}
.menu a {
  text-decoration: none;
  color: #333;
  padding: 8px 16px;
}
.menu a:hover {
  background-color: #f0f0f0;
}

垂直下拉菜单

结合:hover伪类和绝对定位实现二级菜单展开。注意设置position: relative作为定位基准点。

.menu li {
  position: relative;
}
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}
.menu li:hover .submenu {
  display: block;
}

响应式设计

使用媒体查询适配移动设备，通常将水平菜单转换为垂直汉堡菜单。需要配合JavaScript实现点击触发。

@media (max-width: 768px) {
  .menu {
    flex-direction: column;
    display: none;
  }
  .menu.active {
    display: flex;
  }
}

动画效果增强

通过CSS过渡或变换属性添加平滑动画。例如下拉菜单的淡入效果或按钮的颜色渐变。

.submenu {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.menu li:hover .submenu {
  opacity: 1;
}

无障碍优化

确保菜单可通过键盘导航操作，使用ARIA属性标注角色状态。高对比度颜色和足够点击区域改善可用性。

<nav aria-label="主菜单">
  <ul role="menubar">
    <li role="none"><a role="menuitem" href="#">项目</a></li>
  </ul>
</nav>