css制作网站导航

使用CSS制作网站导航的方法

水平导航栏

通过display: inline-block或flexbox布局实现水平导航栏。设置背景色、间距和悬停效果增强交互性。

.navbar {
  background-color: #333;
  overflow: hidden;
}

.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}

垂直导航栏

将浮动改为display: block即可创建垂直导航栏。适合侧边栏布局，可配合固定定位使用。

.navbar-vertical a {
  display: block;
  width: 200px;
}

响应式导航

使用媒体查询和汉堡菜单图标实现移动端适配。通过JavaScript切换类名控制显示/隐藏。

@media screen and (max-width: 600px) {
  .navbar.responsive {position: relative;}
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

下拉菜单

结合: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;
}

粘性导航

使用position: sticky让导航栏在滚动时保持可见。需指定top值确定粘滞位置。

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

动画效果

通过transition属性添加平滑的颜色变化或变形效果。可结合transform实现更复杂的交互。

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

.nav-item:hover {
  transform: scale(1.05);
}