导航菜单无法折叠通常因媒体查询或Flexbox设置不当，需用@media控制断点，结合flex-direction: column与max-height切换实现响应式折叠效果。
在使用CSS响应式布局时，如果导航菜单无法正常折叠，通常是由于媒体查询设置不当或Flexbox属性未正确切换导致的。要实现移动端下导航的折叠效果，可以通过media查询结合flex-direction与display等属性来控制菜单的显示方式。
检查HTML结构是否合理
确保导航结构语义清晰，通常使用nav标签包裹菜单项，并为菜单容器添加一个明确的类名，例如：
<nav class="navbar">
<div class="logo">Logo</div>
<ul class="nav-menu">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系</a></li>
</ul>
<div class="hamburger">☰</div>
</nav>
使用Flex布局和Media Query控制显示
默认在桌面端让菜单横向排列，在移动端竖向堆叠并隐藏。关键在于利用@media查询屏幕宽度，并通过flex-direction: column实现垂直布局。
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
<p>.nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}</p><p>.nav-menu li {
margin: 0 1rem;
}</p><p>.nav-menu a {
text-decoration: none;
color: #333;
}</p><p>/<em> 移动端样式 </em>/
@media (max-width: 768px) {
.nav-menu {
flex-direction: column;
width: 100%;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}</p><p>.nav-menu.active {
max-height: 300px; /<em> 根据实际内容调整 </em>/
}
}</p>添加JavaScript控制折叠开关
仅靠CSS无法动态切换展开状态，需用JavaScript控制active类的添加与移除。
立即学习“前端免费学习笔记（深入）”；
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
<p>hamburger.addEventListener('click', () => {
navMenu.classList.toggle('active');
});</p>点击汉堡图标时，菜单会在column方向展开或收起。若不加JS，只能通过:hover模拟，不适合移动端。
常见问题排查
-
菜单不折叠：检查
max-height: 0和overflow: hidden是否生效 - 移动端仍横向显示：确认media query断点是否覆盖目标设备（如768px以下）
-
动画卡顿：避免使用
height: auto做过渡，改用max-height固定值 -
flex-direction未切换：确保在media query中明确设置
flex-direction: column
基本上就这些。只要结构清晰、媒体查询准确、JS触发到位，导航就能在小屏幕上顺利折叠。关键是让布局随屏幕变化自然响应，而不是强行隐藏元素。
