css 制作菜单

水平菜单制作

使用 display: inline-block 或 flexbox 创建水平导航菜单。设置背景色、悬停效果和间距增强视觉体验。

<style>
.nav-menu {
  background-color: #333;
  padding: 0;
  list-style: none;
  display: flex;
}

.nav-menu li {
  padding: 15px 20px;
}

.nav-menu a {
  color: white;
  text-decoration: none;
}

.nav-menu li:hover {
  background-color: #111;
}
</style>

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

垂直菜单制作

通过 display: block 属性实现垂直排列。调整宽度和边框样式可创建侧边栏效果。

<style>
.side-menu {
  width: 200px;
  list-style: none;
  padding: 0;
}

.side-menu li {
  border-bottom: 1px solid #ddd;
}

.side-menu a {
  display: block;
  padding: 12px;
  color: #555;
}

.side-menu a:hover {
  background-color: #f5f5f5;
}
</style>

<ul class="side-menu">
  <li><a href="#">个人中心</a></li>
  <li><a href="#">消息通知</a></li>
  <li><a href="#">系统设置</a></li>
</ul>

下拉菜单实现

结合 position: absolute 和 :hover 伪类创建交互式下拉菜单。注意设置 z-index 确保层级正确。

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<div class="dropdown">
  <button>下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">选项1</a>
    <a href="#">选项2</a>
  </div>
</div>

响应式菜单设计

使用媒体查询实现移动端适配。常见方案包括汉堡菜单和可折叠导航栏。

<style>
.mobile-menu {
  display: none;
}

@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }
  .mobile-menu {
    display: block;
  }
}
</style>

菜单动画效果

通过 CSS transition 添加平滑过渡效果。可应用于颜色变化、尺寸调整等属性。

.menu-item {
  transition: background-color 0.3s ease;
}

.menu-item:hover {
  background-color: #4CAF50;
  transform: scale(1.05);
}