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()。

• 确保页面加载完成后执行初始化，例如：

document.addEventListener('DOMContentLoaded', function() {
  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 示例（关键属性不能漏）：

• 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 类名本身。