菜单制作 css

基础菜单结构

使用HTML的无序列表<ul>和列表项<li>构建菜单骨架，语义化标签增强可访问性：

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

水平导航菜单

通过Flexbox实现水平排列，适合顶部导航栏：

.menu ul {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu a {
  text-decoration: none;
  color: #333;
  padding: 8px 16px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.menu a:hover {
  background-color: #f0f0f0;
}

垂直侧边栏菜单

使用块级布局实现垂直菜单，适合侧边栏场景：

.menu ul {
  display: block;
  width: 200px;
}

.menu li {
  margin-bottom: 8px;
}

.menu a {
  display: block;
  padding: 12px;
  background: #f8f9fa;
}

下拉菜单实现

通过CSS定位和悬停交互创建二级菜单：

.menu li {
  position: relative;
}

.menu ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.menu li:hover > ul {
  display: block;
}

响应式菜单设计

使用媒体查询实现移动端适配，常见汉堡菜单模式：

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

  .menu-toggle {
    display: block;
    cursor: pointer;
  }

  .menu.active ul {
    display: flex;
  }
}

视觉增强技巧

添加过渡效果和活动状态指示器提升用户体验：

.menu a {
  transition: all 0.3s ease;
}

.menu a.active {
  border-left: 3px solid #0066cc;
  background-color: #e6f2ff;
}

.menu li:hover > a {
  transform: translateY(-2px);
}

无障碍优化

确保键盘导航和屏幕阅读器兼容性：

.menu a:focus {
  outline: 2px solid #0056b3;
  outline-offset: 2px;
}

[aria-current="page"] {
  font-weight: bold;
}