当前位置：首页 > CSS

菜单制作css

2026-02-12 21:34:45CSS

基础菜单样式设计

使用CSS创建水平或垂直导航菜单，通过display: flex实现布局。水平菜单通常设置flex-direction: row，垂直菜单使用flex-direction: column。清除默认列表样式（list-style: none）并移除边距。

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

.nav-menu li {
  padding: 12px 16px;
}

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

悬停与交互效果

添加:hover伪类增强交互性，过渡效果使用transition属性平滑变化。激活状态可用.active类高亮当前页面。

.nav-menu li:hover {
  background-color: #555;
  transition: background-color 0.3s ease;
}

.nav-menu .active {
  background-color: #4CAF50;
}

下拉子菜单实现

通过相对定位（position: relative）和绝对定位（position: absolute）创建下拉菜单。初始隐藏子菜单（display: none），父级悬停时显示（display: block）。

.dropdown {
  position: relative;
}

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

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  display: block;
}

响应式菜单适配

使用媒体查询（@media）在小屏幕切换为汉堡菜单。通过JavaScript切换类名控制移动菜单的显示/隐藏。

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

动画与视觉增强

结合CSS动画（@keyframes）或变换（transform）提升视觉体验。阴影效果（box-shadow）和圆角（border-radius）可增加质感。

.nav-menu li {
  transform: translateY(0);
  transition: transform 0.2s;
}

.nav-menu li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

以上代码模块可根据实际需求组合使用，通过调整颜色、间距和动画参数实现个性化菜单设计。注意保持层级清晰和响应式断点的合理设置。

菜单制作css