css如何制作响应式导航栏_使用flex布局和media查询实现响应式-css教程-PHP中文网

css如何制作响应式导航栏_使用flex布局和media查询实现响应式

php中文网

发布： 2025-12-07 15:59:33

原创

579人浏览过

使用 Flex 布局和 Media 查询可实现响应式导航栏：1. 用 Flex 构建桌面端均匀分布的导航结构；2. 在 768px 以下屏幕隐藏导航项，显示汉堡按钮；3. 通过 JavaScript 切换 active 类控制菜单展开收起；4. 使用 clip-path 添加平滑动画，提升移动端交互体验。

css如何制作响应式导航栏_使用flex布局和media查询实现响应式

制作响应式导航栏是现代网页开发中的常见需求。使用 Flex 布局结合 Media 查询，可以轻松实现一个在桌面端和移动端都表现良好的导航栏。

1. 使用 Flex 布局构建基础结构

Flex 布局非常适合用来对齐和分布导航项。它能自动调整子元素的尺寸和位置，使导航栏内容均匀分布或对齐到一侧。

示例 HTML 结构：

<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-links">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
  </ul>
  <div class="menu-toggle"><span></span><span></span><span></span></div>
</nav>

登录后复制

对应的 CSS（桌面端样式）：

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #333;
  color: white;
}
<p>.nav-links {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}</p><p>.nav-links li a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
}</p><p>.logo {
font-size: 1.5rem;
font-weight: bold;
}

登录后复制

2. 添加媒体查询适配移动端

当屏幕变小时，隐藏导航链接，并显示一个汉堡菜单按钮。点击按钮可切换菜单显示状态（需配合 JavaScript）。

立即学习“前端免费学习笔记（深入）”；

添加汉堡按钮样式：

堆友

Alibaba Design打造的设计师全成长周期服务平台，旨在成为设计师的好朋友

759

查看详情

.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}
<p>.menu-toggle span {
width: 25px;
height: 3px;
background-color: white;
margin: 3px 0;
transition: 0.3s;
}

登录后复制

设置移动端断点（例如 768px）：

@media (max-width: 768px) {
  .menu-toggle {
    display: flex; /* 显示汉堡按钮 */
  }
<p>.nav-links {
position: absolute;
top: 70px;
left: 0;
right: 0;
flex-direction: column;
background-color: #333;
padding: 1rem;
clip-path: circle(0px at top right);
transition: clip-path 0.4s ease-out;
pointer-events: none;
}</p><p>.nav-links.active {
clip-path: circle(1000px at top right);
pointer-events: auto;
}</p><p>.nav-links li {
margin: 1rem 0;
}
}

登录后复制

3. 使用 JavaScript 控制菜单开关

为汉堡按钮添加点击事件，切换 active 类来控制菜单展开与收起。

const menuToggle = document.querySelector('.menu-toggle');
const navLinks = document.querySelector('.nav-links');
<p>menuToggle.addEventListener('click', () => {
navLinks.classList.toggle('active');
});

登录后复制

说明： 这里用 clip-path 实现了平滑展开动画。也可以用 height 或 transform 实现类似效果。