layui移动端汉堡菜单需结构+CSS+JS协同实现：导航项必须统一包裹在.navbar-collapse容器内，通过媒体查询控制显隐，JS仅切换active类触发CSS过渡动画，确保全宽遮罩、展平子菜单及viewport适配。

layui 导航栏在移动端转为汉堡菜单，不是靠 layui 自带的 element 模块自动完成的——它只管菜单项点击和子菜单显隐，不处理容器级折叠。真正起作用的是结构+CSS媒体查询+轻量JS控制，核心是“把所有导航内容收进可切换的折叠区”。

结构上：所有导航项必须统一放进 .navbar-collapse

这是最关键的一步。很多问题源于结构混乱：

• 原生 Bootstrap 风格的 layui admin 模板中，.navbar-collapse 是响应式收起的容器，但如果你把“首页”“关于”“联系”等链接写在它外面，小屏下这些链接就直接消失了
• 下拉菜单（.layui-nav-child）也得放在 .collapse 内部，否则小屏下要先点“更多”，再点二级项，体验断裂
• 正确做法：把全部导航链接（含一级项、下拉触发项、子菜单项）都包裹进同一个 <div class="layui-collapse"> 或 <code><div class="navbar-collapse"> 容器里 <h3>CSS上：用媒体查询隐藏桌面菜单，显示汉堡图标</h3> <p>不需要重写 HTML，只需加几行 CSS：</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro"><img src="https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png" alt="深蓝色网站后台管理系统layui框架模板-AdminPro" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro">深蓝色网站后台管理系统layui框架模板-AdminPro</a> <p>一款深蓝色网站后台管理系统layui框架模板</p> </div> <a href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>默认状态（大屏）：<code>.navbar-collapse 显示为 flex 横向布局；.mobile-menu-icon 设为 display: none
• 小屏断点（如 @media (max-width: 768px)）：
  • 隐藏原桌面导航：.navbar .nav-links { display: none; }
  • 显示汉堡图标：.mobile-menu-icon { display: block; }
  • 让折叠区垂直展开：.navbar-collapse { display: flex; flex-direction: column; width: 100%; }
• 汉堡图标可用纯 CSS 绘制三道横线，无需图片或字体图标

JS上：只负责切换 active 类，不操作样式值

交互逻辑要干净，避免与 CSS 耦合：

• 给汉堡图标绑定点击事件，仅执行：document.querySelector('.navbar-collapse').classList.toggle('active')
• 对应 CSS 中定义：.navbar-collapse.active { display: flex; }（或配合 max-height + overflow 做过渡）
• 不要用 style.display = 'block' 或 animate() 直接改 DOM 样式——这样难维护，且无法利用 CSS transition 动画
• 如果使用 layui.admin 模块，也可调用 layui.admin.sideFlexible()，但它只控制侧边栏，不适用于顶部导航栏

补充：移动端适配细节不能漏

光能展开还不够，得确保体验完整：

• 折叠菜单展开后，需占满全宽、背景遮罩、点击外部自动收起（监听 document 点击并判断目标是否在菜单内）
• 子菜单项在移动端应展平，不保留二级下拉箭头，全部作为一级项垂直排列
• 加 viewport meta 标签：<meta name="viewport" content="width=device-width, initial-scale=1">，否则媒体查询可能失效
• 小屏下默认收起，避免首次加载时导航撑破视口