答案是使用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 实现折叠效果，关键是根据屏幕尺寸动态调整布局和可见性。以下是一个实用且简洁的实现方式。
使用语义化的HTML结构，包含一个导航容器和一个用于小屏幕的切换按钮：
<nav class="navbar">
<div class="nav-toggle" id="mobile-toggle">☰</div>
<ul class="nav-menu" id="nav-menu">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
在较大屏幕上，让导航项在一行显示，超出时自动换行，避免溢出：
.navbar {
background: #333;
padding: 1rem;
}
<p>.nav-menu {
display: flex;
flex-wrap: wrap; /<em> 允许项目换行 </em>/
list-style: none;
margin: 0;
padding: 0;
gap: 1rem;
}</p><p>.nav-menu li a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
}</p>在小屏幕上，折叠菜单，默认隐藏导航项，通过按钮控制显示：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.nav-toggle {
display: block;
color: white;
font-size: 1.5rem;
cursor: pointer;
}
<p>.nav-menu {
flex-direction: column;
display: none; /<em> 默认隐藏 </em>/
}</p><p>.nav-menu.active {
display: flex; /<em> 点击后显示 </em>/
}
}</p>注意：当屏幕小于768px时，nav-menu 被设为 display: none，只有添加 active 类时才显示为垂直列。
添加简单的脚本控制菜单展开与收起：
document.getElementById('mobile-toggle').addEventListener('click', function() {
document.getElementById('nav-menu').classList.toggle('active');
});
点击按钮时，给 nav-menu 切换 active 类，从而控制其显示状态。
确保切换按钮只在移动端出现：
.nav-toggle {
display: none; /* 默认隐藏 */
}
<p>@media (max-width: 768px) {
.nav-toggle {
display: block; /<em> 小屏显示 </em>/
}
}</p>这样在桌面端不会看到汉堡按钮。
基本上就这些。通过 flex-wrap: wrap 实现弹性换行，结合 @media 查询和 display: none 控制可见性，再用 JavaScript 切换类名，就能做出一个轻量又实用的响应式折叠导航菜单。
以上就是如何在CSS中制作响应式导航菜单折叠_flex-wrap wrap结合display none的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
183
收藏
