水平基础导航栏

这是最常见、最简单的导航栏，适用于大多数网站。

导航栏css代码 模板
（图片来源网络，侵删）

HTML 结构

<nav class="basic-nav">
  <a href="#" class="nav-logo">Logo</a>
  <ul class="nav-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS 代码

/* --- 基础重置和布局 --- */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}
/* --- 导航栏容器 --- */
.basic-nav {
  background-color: #333; /* 深色背景 */
  padding: 0 20px; /* 左右内边距 */
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
  height: 60px; /* 固定高度 */
}
/* --- Logo 样式 --- */
.nav-logo {
  color: white;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
}
/* --- 导航菜单列表 --- */
.nav-menu {
  display: flex; /* 让列表项水平排列 */
  list-style: none; /* 移除默认的列表点 */
  margin: 0; /* 移除默认外边距 */
  padding: 0; /* 移除默认内边距 */
}
/* --- 导航菜单项 --- */
.nav-menu li {
  margin: 0 15px; /* 左右间距 */
}
/* --- 导航链接 --- */
.nav-menu a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  transition: color 0.3s ease; /* 颜色变化的过渡效果 */
}
/* --- 鼠标悬停效果 --- */
.nav-menu a:hover {
  color: #4CAF50; /* 悬停时变绿色 */
}

关键点解析：

  • display: flex;: 这是实现水平布局的核心，它让 nav 内的直接子元素（logo 和 ul）排列在同一行。
  • justify-content: space-between;: 让 logo 和菜单分别靠左右两端对齐，非常整洁。
  • list-style: none;: 移除 <ul> 前面的默认项目符号。
  • margin: 0; padding: 0;: 清除浏览器默认的内外边距，确保布局精确。
  • transition: 为链接添加平滑的颜色过渡效果，提升用户体验。

带下拉菜单的水平导航栏

在基础导航栏上增加交互性,实现鼠标悬停时显示子菜单。

HTML 结构

<nav class="dropdown-nav">
  <a href="#" class="nav-logo">Logo</a>
  <ul class="nav-menu">
    <li><a href="#">首页</a></li>
    <li class="dropdown">
      <a href="#">产品 <span class="dropdown-arrow">▼</span></a>
      <ul class="dropdown-content">
        <li><a href="#">产品 A</a></li>
        <li><a href="#">产品 B</a></li>
        <li><a href="#">产品 C</a></li>
      </ul>
    </li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS 代码

/* --- 基础样式（继承自模板一）--- */
body { margin: 0; font-family: Arial, sans-serif; }
.dropdown-nav {
  background-color: #333;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}
.nav-logo {
  color: white;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
}
.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu li {
  margin: 0 15px;
  position: relative; /* 关键：为下拉菜单定位 */
}
.nav-menu a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  display: block; /* 让链接填满整个 li */
  padding: 10px 0; /* 增加点击区域 */
  transition: color 0.3s ease;
}
.nav-menu a:hover {
  color: #4CAF50;
}
/* --- 下拉菜单样式 --- */
.dropdown-content {
  display: none; /* 默认隐藏 */
  position: absolute; /* 相对于父级 li 定位 */
  top: 100%; /* 父级 li 的底部 */
  left: 0;
  background-color: #444;
  min-width: 160px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
}
/* 当鼠标在父级 li 上时显示下拉菜单 */
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-content li {
  width: 100%; /* 让下拉菜单项宽度与父级对齐 */
}
.dropdown-content a {
  padding: 12px 16px;
}
.dropdown-arrow {
  font-size: 12px;
  margin-left: 5px;
}

关键点解析：

  • position: relative;: 在父级 <li> 上设置，这是为了让子菜单（dropdown-content）能够相对于它进行定位。
  • position: absolute;: 在下拉菜单上设置，它会脱离正常的文档流，并相对于最近的设置了 position: relative 的父元素定位。
  • top: 100%;: 将下拉菜单的顶部对齐到父级 <li> 的底部。
  • display: none; / display: block;: 通过 hover 伪类来控制下拉菜单的显示和隐藏，实现纯 CSS 的下拉效果。

响应式汉堡菜单导航栏

适用于移动设备,在小屏幕上显示汉堡图标，点击后展开菜单。

HTML 结构

<nav class="responsive-nav">
  <a href="#" class="nav-logo">Logo</a>
  <div class="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul class="nav-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS 代码

/* --- 基础样式 --- */
body { margin: 0; font-family: Arial, sans-serif; }
.responsive-nav {
  background-color: #333;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}
.nav-logo {
  color: white;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
}
/* --- 汉堡菜单 --- */
.hamburger {
  display: none; /* 默认在桌面端隐藏 */
  flex-direction: column;
  cursor: pointer;
}
.hamburger span {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 3px 0;
  transition: 0.3s;
}
/* --- 导航菜单 --- */
.nav-menu {
  display: flex; /* 桌面端水平排列 */
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu li {
  margin: 0 15px;
}
.nav-menu a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  transition: color 0.3s ease;
}
.nav-menu a:hover {
  color: #4CAF50;
}
/* --- 响应式设计 (关键) --- */
@media (max-width: 768px) { /* 当屏幕宽度小于768px时 */
  /* 汉堡菜单显示 */
  .hamburger {
    display: flex;
  }
  /* 导航菜单垂直堆叠并隐藏 */
  .nav-menu {
    position: fixed; /* 固定定位，覆盖全屏 */
    left: -100%; /* 初始状态在屏幕外 */
    top: 60px; /* 在导航栏下方 */
    flex-direction: column; /* 垂直排列 */
    background-color: #333;
    width: 100%;
    text-align: center;
    transition: 0.3s; /* 滑动动画 */
    padding: 20px 0;
    box-sizing: border-box; /* 让 padding 不影响宽度 */
  }
  /* 当汉堡菜单被点击（通过JS添加 active 类）时，菜单滑入 */
  .nav-menu.active {
    left: 0;
  }
  /* 移动端菜单项样式 */
  .nav-menu li {
    margin: 10px 0;
  }
}

JavaScript 交互代码 (必须添加)

纯 CSS 无法实现点击汉堡菜单的开关功能，需要一点 JavaScript。

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", () => {
  navMenu.classList.toggle("active");
});
// 点击菜单项后自动关闭菜单（可选）
document.querySelectorAll(".nav-menu a").forEach(n => n.addEventListener("click", () => {
  navMenu.classList.remove("active");
}));

关键点解析：

  • @media (max-width: 768px) {}: 这是媒体查询，当屏幕宽度小于 768px 时，应用其中的 CSS 规则，实现移动端适配。
  • display: none; / display: flex;: 在不同屏幕尺寸下控制汉堡菜单和普通菜单的显示。
  • position: fixed; left: -100%;: 将菜单固定在屏幕左侧，并隐藏在视口外。
  • left: 0;: 当菜单需要显示时（通过 JS 切换 .active 类），将其 left 值设为 0，实现滑入效果。
  • transition: 为菜单的 left 属性添加过渡，使滑动动画更平滑。

如何使用这些模板？

  1. 复制代码：将 HTML 和 CSS 代码分别复制到您的 HTML 文件和 CSS 文件中。
  2. ：将 "Logo"、"首页"、"关于我们" 等文本替换为您自己的内容。
  3. 调整样式：修改 background-color、color、font-size、padding、margin 等属性，使其符合您网站的设计风格。
  4. 响应式菜单：如果您使用模板三，请务必将 JavaScript 代码添加到您的 HTML 文件中（通常放在 <body> 标签结束前）。

希望这些模板能帮助您快速构建出专业的导航栏！

导航栏css代码 模板
（图片来源网络，侵删）
导航栏css代码 模板
（图片来源网络，侵删）