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

P粉602998670 2025-12-07 00:00:00 次阅读

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

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

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

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

示例 HTML 结构：


  Logo
  
    首页
    关于
    服务
    联系

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

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

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

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

添加汉堡按钮样式：

.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}
.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; /* 显示汉堡按钮 */
  }
.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;
}
.nav-links.active {
clip-path: circle(1000px at top right);
pointer-events: auto;
}
.nav-links li {
margin: 1rem 0;
}
}

3. 使用 JavaScript 控制菜单开关

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

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

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