CSS 制作响应式导航菜单

Begindev 编辑部 March 25, 2026

响应式导航菜单对于提供跨设备无缝用户体验至关重要。它能确保无论用户是使用台式机、平板还是智能手机，都能轻松浏览你的网站。

本章将介绍使用 CSS 创建简单高效的响应式导航菜单的基础技术。我们将重点关注如何使用媒体查询（Media Queries）根据屏幕尺寸调整菜单的外观和行为，并学习如何制作移动端友好的“汉堡”菜单。

1. 理解基本结构

在深入 CSS 之前，让我们先建立导航菜单的基本 HTML 结构。我们会使用无序列表 (<ul>) 来容纳菜单项，并将其包裹在 <nav> 元素中以保证语义清晰。

<nav>
  <a href="#" class="logo">My Website</a>
  <ul>
    <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>
</nav>

这段代码创建了一个包含 Logo 和四个菜单项的简单导航栏。给 Logo 链接添加 logo 类是为了方便后续样式设置。

2. 为桌面端设计导航样式

首先，我们为大屏幕（桌面端）设计导航菜单样式。我们将使用 CSS 创建一个视觉效果良好的水平菜单。

nav {
  background-color: #333;
  color: white;
  padding: 10px 0;
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 左右两端对齐 */
  align-items: center; /* 垂直居中 */
}
nav .logo {
  font-size: 1.5em;
  margin-left: 20px;
  color: white;
  text-decoration: none;
}
nav ul {
  list-style: none; /* 去除列表前的圆点 */
  margin: 0;
  padding: 0;
  display: flex; /* 让列表项水平排列 */
}
nav ul li {
  margin: 0 15px; /* 菜单项之间的间距 */
}
nav ul li a {
  color: white;
  text-decoration: none;
}
nav ul li a:hover {
  text-decoration: underline; /* 鼠标悬停时添加下划线 */
}

这段 CSS 代码的作用如下：

设置 <nav> 的背景色、文字颜色和内边距。
使用 display: flex 创建水平布局，Logo 在左，菜单项在右。
将 Logo 的字体放大并去除下划线。
去除无序列表的默认样式（圆点），并将外边距和内边距设为零。
使用 display: flex 让菜单项 (li) 水平排列。
设置链接颜色为白色，并在悬停时显示下划线以提供视觉反馈。

3. 引入媒体查询实现响应式

媒体查询是响应式设计的基石。它们允许你根据设备特性（如屏幕尺寸、方向）应用不同的 CSS 规则。我们将使用媒体查询来适配小屏幕设备。

媒体查询的基本语法如下：

@media (条件) {
  /* 当条件满足时应用的 CSS 规则 */
}

例如，要仅在屏幕宽度小于或等于 768 像素时应用样式：

@media (max-width: 768px) {
  /* 针对小屏幕的 CSS 规则 */
}

4. 创建移动端“汉堡”菜单

在小屏幕上，水平导航菜单会变得拥挤且难以使用。常见的解决方案是将菜单折叠成一个**“汉堡”图标**（三条横线），用户点击后才会显示菜单项。

4.1 添加汉堡图标 HTML

首先，我们需要添加汉堡图标的 HTML 代码。这里我们用一个简单的 <div> 包含三个 <span> 来模拟三条线。

<nav>
  <a href="#" class="logo">My Website</a>
  <div class="menu-toggle">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul>
    <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>
</nav>

4.2 设计汉堡图标样式

接下来，我们用 CSS 设计汉堡图标。我们会在大屏幕上隐藏它，只在小屏幕的媒体查询中显示它。

/* 默认隐藏汉堡图标 (针对大屏幕) */
.menu-toggle {
  display: none; 
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 25px;
  cursor: pointer;
  margin-right: 20px;
}
.menu-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: white;
  border-radius: 3px;
}

/* 针对小屏幕的媒体查询 */
@media (max-width: 768px) {
  .menu-toggle {
    display: flex; /* 在小屏幕上显示汉堡图标 */
  }
  
  nav ul {
    display: none; /* 默认隐藏菜单项 */
    flex-direction: column; /* 改为垂直排列 */
    position: absolute; /* 绝对定位 */
    top: 60px; /* 根据导航栏高度调整 */
    left: 0;
    width: 100%;
    background-color: #333;
    text-align: center;
  }
  
  /* 当添加 'active' 类时显示菜单 */
  nav ul.active {
    display: flex; 
  }
  
  nav ul li {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid #555;
  }
}

这段 CSS 的关键点：

.menu-toggle 默认是 display: none。
在媒体查询中，.menu-toggle 变为 display: flex 可见。
nav ul 在小屏幕默认为 display: none（隐藏），并设置为绝对定位和垂直排列 (column)。
增加了一个 nav ul.active 状态，当该类存在时，菜单会显示出来（我们将通过 JavaScript 来控制这个类）。

4.3 添加 JavaScript 实现切换功能

为了让汉堡菜单动起来，我们需要一点 JavaScript 代码。当用户点击 .menu-toggle 时，脚本会给 nav ul 添加或移除 active 类。

<script>
const menuToggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('nav ul');

menuToggle.addEventListener('click', () => {
  menu.classList.toggle('active');
});
</script>

这段 JS 代码做了三件事：

选中汉堡图标和菜单列表元素。
给汉堡图标添加点击事件监听器。
点击时，切换菜单列表上的 active 类（有则删，无则加）

5. 增强与注意事项

5.1 过渡动画 (Transitions)

为了让菜单显示更平滑，你可以给 <ul> 添加 CSS 过渡效果：

nav ul {
  /* ... 原有样式 ... */
  transition: all 0.3s ease; /* 添加平滑过渡 */
}

注意：display 属性通常无法直接应用动画过渡，你可能需要结合 max-height 或 opacity 来实现更复杂的动画效果。

5.2 可访问性 (Accessibility)

确保你的菜单对所有用户友好：

使用语义化标签（如 <nav>, <ul>, <a>）。
为汉堡图标提供替代文本（例如使用 aria-label="Toggle navigation"）。
确保菜单项可以通过键盘 Tab 键选中。

5.3 移动优先策略

虽然本例演示了“桌面优先”的写法（先写桌面样式，再用 max-width 改写），但移动优先通常是推荐的做法。即先写移动端样式，再用 min-width 为大屏幕添加样式。