css头部导航制作

CSS 头部导航制作方法

固定顶部导航栏

固定导航栏通常位于页面顶部，滚动页面时保持可见。使用 position: fixed 和 top: 0 实现固定定位，width: 100% 确保导航栏覆盖整个视口宽度。

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  overflow: hidden;
}

水平导航菜单

使用 display: inline-block 或 float: left 将导航项水平排列。list-style-type: none 移除列表项的默认样式。

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

悬停效果

通过 :hover 伪类添加悬停效果，增强用户交互体验。

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

响应式导航

使用媒体查询实现响应式设计，在小屏幕设备上转换为汉堡菜单。

@media screen and (max-width: 600px) {
  .navbar a {
    float: none;
    display: block;
  }
}

下拉菜单

通过 position: relative 和 display: none 初始隐藏下拉内容，悬停时显示。

.dropdown {
  position: relative;
  display: inline-block;
}

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

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

粘性导航栏

粘性导航栏在滚动到特定位置时固定。使用 position: sticky 和 top: 0 实现。

.navbar {
  position: sticky;
  top: 0;
  background-color: #333;
  padding: 10px 0;
}

导航栏品牌标识

通常左侧放置品牌标识，使用 float: left 或 flexbox 布局。

.navbar-brand {
  float: left;
  padding: 15px;
  font-size: 20px;
  font-weight: bold;
}

右侧对齐导航项

使用 float: right 或 margin-left: auto 将部分导航项右对齐。

.navbar-right {
  float: right;
}

激活状态

通过 .active 类突出显示当前页面的导航项。

.navbar a.active {
  background-color: #4CAF50;
  color: white;
}

透明导航栏

使用 rgba 颜色值和 background-color: transparent 创建透明效果。

.navbar {
  background-color: rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s;
}

.navbar.scrolled {
  background-color: #333;
}

导航栏阴影

添加 box-shadow 增强视觉层次感。

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