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;
  padding: 0;
  margin: 0;
  display: flex;
  background-color: #333;
}

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

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

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

垂直导航条

通过display: block让列表项垂直堆叠。固定宽度和高度可创建侧边栏式导航。

.vertical-nav ul {
  list-style-type: none;
  width: 200px;
  background-color: #f1f1f1;
}

.vertical-nav li a {
  display: block;
  padding: 12px;
  color: #000;
}

.vertical-nav li a:hover {
  background-color: #555;
  color: white;
}

下拉菜单导航

结合:hover伪类和绝对定位实现二级菜单。需要设置父级position: relative作为定位基准。

.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;
}

响应式导航

使用媒体查询和flex-direction切换布局。移动端常用汉堡菜单图标触发显示隐藏。

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

  .responsive-nav li {
    text-align: center;
  }
}

导航条美化技巧

添加transition实现平滑悬停效果，使用border-radius圆角，box-shadow增加层次感。

.styled-nav a {
  transition: background-color 0.3s ease;
  border-radius: 4px;
}

.styled-nav {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

粘性导航条

position: sticky让导航条在滚动时保持可见。需要指定top值确定粘附位置。

.sticky-nav {
  position: sticky;
  top: 0;
  z-index: 100;
}