当前位置：首页 > CSS

css菜单怎么制作

2026-04-02 03:33:56CSS

使用纯CSS制作水平导航菜单

通过display: inline-block或flexbox实现水平排列的导航菜单。HTML结构通常使用<ul>和<li>标签，CSS设置列表项横向排列并添加悬停效果。

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

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

创建垂直下拉菜单

利用:hover伪类触发子菜单显示，通过position: absolute实现悬浮效果。父菜单项需设置position: relative。

<ul class="dropdown">
  <li><a href="#">菜单1</a>
    <ul class="submenu">
      <li><a href="#">子项1</a></li>
    </ul>
  </li>
</ul>

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

实现响应式汉堡菜单

通过媒体查询和checkbox hack技术，在小屏幕下显示可折叠的汉堡菜单。利用<label>关联隐藏的<input type="checkbox">控制菜单显隐。

<input type="checkbox" id="menu-toggle">
<label for="menu-toggle">☰</label>
<ul class="responsive-menu">
  <li><a href="#">项目1</a></li>
</ul>

#menu-toggle { display: none; }
label { display: none; cursor: pointer; }

@media (max-width: 768px) {
  label { display: block; }
  .responsive-menu {
    display: none;
    width: 100%;
  }
  #menu-toggle:checked ~ .responsive-menu {
    display: block;
  }
}

添加菜单动画效果

使用CSS过渡或变换增强交互体验。常见效果包括颜色渐变、滑动展开和旋转图标。

.menu li a {
  transition: background 0.3s ease;
}
.submenu {
  transform: translateY(-10px);
  opacity: 0;
  transition: all 0.3s ease;
}
.dropdown:hover .submenu {
  transform: translateY(0);
  opacity: 1;
}

使用CSS变量统一风格

定义CSS变量管理颜色、间距等属性，便于整体风格调整和维护。

css菜单怎么制作

:root {
  --menu-bg: #2c3e50;
  --menu-text: #ecf0f1;
  --menu-hover: #3498db;
}
.menu {
  background: var(--menu-bg);
}
.menu li a {
  color: var(--menu-text);
}
.menu li a:hover {
  background: var(--menu-hover);
}