如何在CSS中制作响应式导航菜单折叠_flex-wrap wrap结合display none

答案是使用flex-wrap换行与display:none隐藏结合JavaScript切换类实现响应式导航。首先构建语义化nav结构，包含切换按钮和导航列表；桌面端通过flex-wrap:wrap使菜单项自动换行；移动端用@media(max-width:768px)将.nav-menu设为display:none默认隐藏，并设置flex-direction:column；通过JavaScript为按钮添加点击事件，切换.nav-menu的active类控制显示；同时确保按钮仅在小屏出现。最终实现流畅的响应式折叠导航效果。

要在CSS中创建一个响应式导航菜单，结合 flex-wrap: wrap 和 display: none 实现折叠效果，关键是根据屏幕尺寸动态调整布局和可见性。以下是一个实用且简洁的实现方式。

1. 基础HTML结构

使用语义化的HTML结构，包含一个导航容器和一个用于小屏幕的切换按钮：

2. 桌面端：使用 flex-wrap 允许换行

在较大屏幕上，让导航项在一行显示，超出时自动换行，避免溢出：

.navbar {
  background: #333;
  padding: 1rem;
}
.nav-menu {
display: flex;
flex-wrap: wrap;        / 允许项目换行 /
list-style: none;
margin: 0;
padding: 0;
gap: 1rem;
}
.nav-menu li a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
}

3. 移动端：默认隐藏 + 切换显示

在小屏幕上，折叠菜单，默认隐藏导航项，通过按钮控制显示：

@media (max-width: 768px) {
  .nav-toggle {
    display: block;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
  }
.nav-menu {
flex-direction: column;
display: none;        / 默认隐藏 /
}
.nav-menu.active {
display: flex;        / 点击后显示 /
}
}

注意：当屏幕小于768px时，nav-menu 被设为 display: none，只有添加 active 类时才显示为垂直列。

4. 使用JavaScript控制切换

添加简单的脚本控制菜单展开与收起：

document.getElementById('mobile-toggle').addEventListener('click', function() {
  document.getElementById('nav-menu').classList.toggle('active');
});

点击按钮时，给 nav-menu 切换 active 类，从而控制其显示状态。

5. 可选优化：默认显示切换按钮

确保切换按钮只在移动端出现：

.nav-toggle {
  display: none; /* 默认隐藏 */
}
@media (max-width: 768px) {
.nav-toggle {
display: block; / 小屏显示 /
}
}

这样在桌面端不会看到汉堡按钮。

基本上就这些。通过 flex-wrap: wrap 实现弹性换行，结合 @media 查询和 display: none 控制可见性，再用 JavaScript 切换类名，就能做出一个轻量又实用的响应式折叠导航菜单。