css导航栏制作

水平导航栏制作

使用display: inline-block或flexbox实现水平排列的导航栏。设置背景色、间距和悬停效果增强交互性。

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

.horizontal-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  display: flex; /* 或使用 display: inline-block */
}

.horizontal-nav li {
  padding: 12px 20px;
}

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

.horizontal-nav li:hover {
  background-color: #111;
}

垂直导航栏制作

通过display: block属性让导航项垂直堆叠。适合侧边栏或移动端菜单设计。

.vertical-nav li {
  display: block;
  width: 200px;
  border-bottom: 1px solid #ddd;
}

.vertical-nav a {
  display: block;
  padding: 8px 16px;
}

响应式导航栏

使用媒体查询实现移动端适配。常见做法是将水平导航转换为汉堡菜单。

@media (max-width: 600px) {
  .horizontal-nav ul {
    flex-direction: column;
  }

  .hamburger-menu {
    display: block;
  }
}

下拉菜单实现

通过:hover伪类或JavaScript控制子菜单显示。注意设置position: absolute精确定位。

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
}

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

固定定位导航栏

使用position: fixed让导航栏始终停留在视窗顶部或底部。设置z-index确保在其他元素上方。

.fixed-nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

导航栏动画效果

添加CSS过渡效果提升用户体验。常见效果包括颜色渐变、滑动指示条等。

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

.active-indicator {
  height: 3px;
  background: #4CAF50;
  transition: all 0.3s ease;
}