首页 > 文章 > 前端

响应式导航菜单折叠技巧分享

时间：2025-12-22 23:27:36 188浏览收藏

推广推荐

支持 PC / 移动端，安全直达

文章不知道大家是否熟悉？今天我将给大家介绍《CSS响应式导航菜单折叠技巧》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

答案是使用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

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

1. 基础HTML结构

使用语义化的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>

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

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

.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>

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

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

@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 类时才显示为垂直列。

4. 使用JavaScript控制切换

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

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

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

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

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

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

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

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

到这里，我们也就讲完了《响应式导航菜单折叠技巧分享》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！