Materialize 响应式导航栏不显示的主因是初始化缺失或 HTML 结构错误：1. v1+ 需手动调用 M.Sidenav.init()；2. trigger 按钮必须含 class="sidenav-trigger" 且 data-target 与 sidenav id 严格匹配；3. 确保 Materialize JS 已加载、DOM 就绪、无控制台报错；4. 排查 z-index 遮挡、viewport 缺失及 class 拼写错误。
Materialize 的响应式导航栏（sidenav）不显示，通常不是 CSS 问题，而是 JavaScript 初始化或 HTML 结构没到位。重点检查以下三处：
1. 确保 sidenav 已正确初始化
Materialize v1+ 不再自动初始化 sidenav，必须手动调用 M.Sidenav.init()。
- 确保页面加载完成后执行初始化，例如：
var elems = document.querySelectorAll('.sidenav');
M.Sidenav.init(elems, {
edge: 'left',
draggable: true
});
});
- 如果使用 jQuery，注意 Materialize v1+ 已移除 jQuery 依赖，不要写
$('.sidenav').sidenav()，会报错或静默失败。
2. 检查 trigger 按钮是否绑定正确
触发按钮（通常是 hamburger 图标）必须有 data-target 属性，且值与 sidenav 的 id 完全一致。
- HTML 示例（关键属性不能漏）：
menu
- data-target="mobile-nav" 必须和 id="mobile-nav" 严格匹配（区分大小写、无空格）。
- 按钮需有 class="sidenav-trigger"，否则无法被 JS 识别为触发器。
3. 验证 DOM 加载顺序和资源引用
sidenav 初始化代码必须在 Materialize JS 文件之后、且在 DOM 元素渲染完成之后运行。
立即学习“前端免费学习笔记（深入）”；
- 确认已按顺序引入：jQuery（仅 v0.98 及更早需）、Materialize CSS、Materialize JS（v1+ 不需要 jQuery）；
- 检查浏览器控制台是否有报错，如
ReferenceError: M is not defined→ 表示 Materialize JS 未加载； - 检查元素是否存在：在 DevTools 中搜索
.sidenav，确认对应 DOM 节点已存在且未被动态移除。
4. 常见干扰项快速排查
- z-index 被覆盖：sidenav 默认 z-index 是 1002，若页面有其他 fixed 元素 z-index 更高（如自定义 header），菜单会被遮挡 —— 检查 computed 样式中的 z-index；
-
移动端 viewport 设置缺失：确保
已添加，否则媒体查询失效，trigger 按钮不出现； -
class 名拼写错误：比如写成
sidenave、siderav-trigger或漏掉sidenav类名本身。
