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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-29

浏览次数：次

返回列表

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

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

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

1. 基础HTML结构

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

<n* class="n*bar">
  <div class="n*-toggle" id="mobile-toggle">☰</div>
  <ul class="n*-menu" id="n*-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</n*>

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

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

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

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

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

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

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

4. 使用J*aScript控制切换

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

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

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

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

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

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

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

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

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

以上就是如何在CSS中制作响应式导航菜单折叠_flex-wrap wrap结合display none的详细内容，更多请关注其它相关文章！

# 就能 # 推广旺铺还是网站优势 # 纹绣营销推广外包 # 德州营销推广哪家好 # 离石网站优化哪家强 # 每日一贴seo # 株洲网站排名优化公司 # 有用的网站优化工具软件 # 房产营销推广类别有哪些 # 旅游网站se优化方案 # 佛坪seo霸屏培训 # 要在 # 屏幕上 # css # 见性 # 是一个 # 不均匀 # 中不 # 如何在 # 设为 # 换行 # 点击事件 # ssl # html # java # javascript

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：如何在CSS中使用absolute实现图片水印_absolute与opacity结合

下一篇：如何在CSS中使用:target选择器_锚点跳转后高亮目标元素

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

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

1. 基础HTML结构

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

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

4. 使用J*aScript控制切换

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