经典下拉菜单（使用 hover）
这是最常见、最经典的导航条实现方式，当鼠标移动到菜单项上时，下拉菜单会自动展开，无需任何 JS,体验流畅。
（图片来源网络，侵删）
核心思路
- 使用 HTML 的
<ul>和<li>结构来构建导航列表。 - 使用 CSS 的
position: relative和position: absolute来定位下拉菜单。 - 使用 CSS 的
hover伪类来控制下拉菜单的显示和隐藏。
完整代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">纯CSS下拉导航条</title>
<style>
/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
}
/* 导航条容器 */
.navbar {
background-color: #333;
overflow: hidden; /* 防止下拉菜单溢出 */
}
/* 导航链接 */
.navbar ul {
list-style-type: none;
display: flex; /* 使用 Flexbox 布局 */
}
.navbar li {
position: relative; /* 为下拉菜单定位提供参考 */
}
.navbar a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
transition: background-color 0.3s ease;
}
/* 鼠标悬停效果 */
.navbar a:hover {
background-color: #555;
}
/* 下拉菜单样式 */
.dropdown-content {
display: none; /* 默认隐藏 */
position: absolute; /* 绝对定位，相对于父级 li */
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* 当鼠标悬停在父级 li 上时，显示下拉菜单 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 下拉菜单中的链接样式 */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* 下拉菜单链接的悬停效果 */
.dropdown-content a:hover {
background-color: #ddd;
}
/* 标识这是一个下拉菜单的样式（可选） */
.dropdown > a::after {
content: ' ▼'; /* 添加一个小箭头 */
font-size: 0.7em;
}
</style>
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#news">新闻</a></li>
<li class="dropdown">
<a href="#products" class="dropbtn">产品</a>
<div class="dropdown-content">
<a href="#product1">产品 1</a>
<a href="#product2">产品 2</a>
<a href="#product3">产品 3</a>
</div>
</li>
<li><a href="#about">关于我们</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</nav>
<div style="padding:20px;">
<h2>这是一个纯 CSS 实现的下拉导航条</h2>
<p>将鼠标悬停在 "产品" 菜单上，即可看到下拉效果。</p>
</div>
</body>
</html>
优点:
- 实现简单,代码直观。
- 在桌面浏览器上体验流畅。
- 无需任何外部库。
缺点:
- 在触摸屏设备（如手机、平板）上，
hover事件无法被可靠触发，因此无法展开下拉菜单,这是此方案最大的局限性。
移动端友好的手风琴菜单（使用 <details> 和 <summary>）
这个方案非常适合现代响应式设计，它使用 HTML5 原生的 <details> 和 <summary> 标签，配合一点点 CSS,就能创建出在桌面和移动端都表现良好的导航条。
核心思路
<details>标签代表一个可以展开/折叠的部件。<summary>标签是<details>的“标题”，点击它可以切换展开/折叠状态。- 默认情况下，
<details>是关闭的，我们可以用open属性让它默认打开，或者用 CSS 的[open]伪类来控制其样式。
完整代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">纯CSS手风琴导航条</title>
<style>
/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
}
/* 导航条容器 */
.navbar {
background-color: #333;
}
/* 导航列表 */
.navbar ul {
list-style-type: none;
display: flex; /* 桌面端水平排列 */
flex-wrap: wrap; /* 移动端允许换行 */
}
/* summary 标签样式 */
.navbar summary {
display: block;
color: white;
padding: 14px 20px;
text-align: center;
text-decoration: none;
cursor: pointer;
/* 去掉默认的小箭头 */
list-style: none;
}
/* 默认隐藏 summary 的小箭头 */
.navbar summary::-webkit-details-marker {
display: none;
}
/* 当 details 展开时（即有 open 属性时）的样式 */
.navbar details[open] summary {
background-color: #555;
}
/* 下拉菜单内容样式 */
.navbar .dropdown-content {
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.navbar .dropdown-content a {
display: block;
color: black;
padding: 12px 20px;
text-decoration: none;
text-align: center;
}
.navbar .dropdown-content a:hover {
background-color: #ddd;
}
/* 移动端适配 */
@media (max-width: 768px) {
.navbar ul {
flex-direction: column; /* 移动端垂直排列 */
}
.navbar summary {
text-align: left; /* 移动端左对齐更常见 */
}
}
</style>
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#news">新闻</a></li>
<li>
<!-- 使用 details 和 summary -->
<details class="dropdown">
<summary>产品</summary>
<div class="dropdown-content">
<a href="#product1">产品 1</a>
<a href="#product2">产品 2</a>
<a href="#product3">产品 3</a>
</div>
</details>
</li>
<li><a href="#about">关于我们</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</nav>
<div style="padding:20px;">
<h2>这是一个使用 HTML5 `<details>` 标签的纯 CSS 导航条</h2>
<p>点击 "产品" 菜单，即可展开/折叠下拉内容，此方案在桌面和移动端均可工作。</p>
</div>
</body>
</html>
优点:
（图片来源网络，侵删）
- 无 JS 且移动端友好：
<details>标签天生为触摸屏设计。 - 语义化好：使用了正确的 HTML5 标签。
- 代码简洁：HTML 结构清晰，CSS 控制简单。
缺点:
- 样式定制不如方案一灵活（默认的箭头需要特殊处理）。
- 在一些非常旧的浏览器（如 IE11）中可能不被支持。
选项卡式导航（使用 target 伪类）
这个方案适用于单页应用，通过点击导航链接来切换显示页面中的不同内容区域,而无需刷新页面。
核心思路
- 每个导航链接的
href指向页面内一个元素的id（#home,#about），区域都有一个唯一的id,并且默认是隐藏的。 - 使用 CSS 的
target伪类，当某个元素成为目标（即 URL 的 hash 匹配到它的id）时，它的样式就会被应用，我们在这里让它显示出来,同时隐藏其他内容。
完整代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">纯CSS选项卡导航</title>
<style>
/* 基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
background-color: #f0f0f0;
color: #333;
}
/* 导航条样式 */
.navbar {
background-color: #444;
padding: 0;
list-style-type: none;
display: flex;
}
.navbar li {
flex: 1; /* 让每个菜单项平均分配宽度 */
}
.navbar a {
display: block;
color: white;
text-align: center;
padding: 15px 0;
text-decoration: none;
transition: background-color 0.3s;
}
.navbar a:hover {
background-color: #555;
}
/* 内容区域容器 */
.content-container {
padding: 20px;
min-height: 300px;
}
/* 默认隐藏所有内容区域 */
.content {
display: none;
padding: 20px;
background-color: white;
border: 1px solid #ddd;
border-radius: 5px;
}
/* 当内容区域的 ID 成为 URL 的目标时，显示它 */
:target {
display: block !important; /* 使用 !important 确保覆盖默认的 display: none */
}
/* 给默认显示的内容一个初始状态，或者让用户通过点击来决定 */
/* 可以给首页一个链接，让用户一进来就能看到 */
/* 或者提供一个“首页”链接，其 href 为 #home */
</style>
</head>
<body>
<ul class="navbar">
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
<div class="content-container">
<!-- 默认情况下，这些内容都是隐藏的 -->
<div id="home" class="content">
<h2>欢迎来到首页</h2>
<p>这是首页的内容，点击导航栏中的链接可以切换不同的页面内容。</p>
</div>
<div id="about" class="content">
<h2>关于我们</h2>
<p>我们是一家致力于提供优质服务的公司。</p>
</div>
<div id="services" class="content">
<h2>我们的服务</h2>
<ul>
<li>服务一</li>
<li>服务二</li>
<li>服务三</li>
</ul>
</div>
<div id="contact" class="content">
<h2>联系我们</h2>
<p>邮箱: contact@example.com</p>
<p>电话: 123-456-7890</p>
</div>
</div>
<!-- 为了让用户一进来就能看到首页，可以加一个自动跳转的脚本，但这里要求无JS -->
<!-- 用户必须先点击一个链接才能看到内容，这是 :target 方案的固有特点。 -->
</body>
</html>
优点:
- 完全无 JS,实现单页应用的切换效果。
- URL 会更新，便于用户收藏和分享特定“页面”的状态。
缺点:
- 初始状态是空白页面，用户必须先点击一个链接才能看到任何内容,体验稍差。
- 无法通过 CSS 实现一个“默认激活”的选项卡。
总结与选择建议
| 方案 | 核心技术 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|---|
| 下拉菜单 | hover 伪类 |
实现简单，桌面体验流畅 | 移动端不友好 | 传统的、主要面向桌面用户的网站。 |
| 手风琴菜单 | <details> 和 <summary>
| |||
| 选项卡导航 | target 伪类 |
实现无 JS 单页切换，URL 可分享 | 初始空白，无法设置默认激活项 | 单页应用（SPA）的内容切换，如个人简介、产品展示等。 |
对于大多数现代网站，方案二（手风琴菜单） 是一个非常好的选择，因为它兼顾了桌面和移动端的体验，且代码简洁、语义化好。
