使用Materialize实现响应式导航需引入其CSS和JS文件，构建含sidenav的nav结构，并通过JavaScript初始化Sidenav组件，利用hide-on-med-and-down和sidenav-trigger等类名适配不同屏幕，自动实现移动端折叠菜单与桌面端常显菜单的切换。
使用 Materialize 实现响应式导航非常简单，它内置了对移动端友好的导航组件，能自动适配不同屏幕尺寸。核心是利用 navbar 结构和 Materialize 提供的类名来构建可折叠的侧边栏（sidenav）菜单。
1. 引入 Materialize CSS 和 JS
在 HTML 文件中引入 Materialize 的 CSS 和 JavaScript 资源，确保响应式功能正常运行：
<!-- Materialize CSS --><link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<!-- Materialize JS（依赖 jQuery）-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
2. 创建响应式导航结构
使用 nav 元素构建顶部导航栏，配合 sidenav 实现小屏下的抽屉菜单：
<nav><div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<a href="#" data-target="mobile-menu" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</div>
</nav>
<!-- 移动端侧边栏 -->
<ul class="sidenav" id="mobile-menu">
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系</a></li>
</ul>
3. 初始化 Sidenav
通过 JavaScript 启用侧边栏功能，Materialize 需要手动初始化某些组件：
立即学习“前端免费学习笔记（深入）”；
<script>document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
M.Sidenav.init(elems);
});
</script>
这样在小屏幕上点击菜单图标时，就会滑出导航选项。
4. 响应式行为说明
- hide-on-med-and-down：让桌面端显示的菜单在中等及更小屏幕隐藏
- sidenav-trigger：触发侧边栏展开，只在小屏可见
- Materialize 自动处理断点（如 600px、992px），无需额外设置媒体查询
- 支持汉堡菜单动画和手势滑动关闭，用户体验流畅
基本上就这些。只要结构正确并初始化组件，Materialize 会自动处理响应式逻辑。不复杂但容易忽略的是 JS 初始化步骤，记得加上。
