使用Materialize框架可快速创建响应式导航栏。首先引入CSS和JS文件，接着用nav构建导航结构，添加brand-logo、hide-on-med-and-down等类实现桌面与移动端适配，通过sidenav-trigger和sidenav组件实现移动端侧边栏，最后利用color classes、搜索框和下拉菜单增强功能，整个过程无需额外CSS即可完成多设备兼容的导航栏。

使用Materialize框架制作响应式导航栏非常简单，它内置了现成的组件和类名，能快速实现桌面端与移动端一致的导航体验。只需几行HTML结构配合Materialize提供的CSS类和JavaScript功能，就能搭建一个美观、自适应的导航栏。

1. 引入Materialize框架

在开始之前，确保页面已正确引入Materialize的CSS和JavaScript文件。可以通过CDN方式快速接入：

<!-- 引入Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<p><!-- 引入Materialize JS（依赖于jQuery）-->
<script src="<a href="https://www.php.cn/link/4ab232445f9b21b65dfdf6ea5f27f704">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script&gt</a>;
<script src="<a href="https://www.php.cn/link/f625c0ef85e8e6d96ec0a1bc16c2741d">https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script&gt</a>;</p>

2. 创建基础导航结构

Materialize使用nav元素构建导航栏，结合navbar-fixed可实现顶部固定效果。以下是基本结构：

<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">联系</a></li>
    </ul>
    <a href="#" data-target="mobile-nav" class="sidenav-trigger right">
      <i class="material-icons">menu</i>
    </a>
  </div>
</nav>

说明：

立即学习“前端免费学习笔记（深入）”；

cn-json-diff

比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现，无需 API 密钥。

下载

• brand-logo：用于放置网站Logo或名称。
• hide-on-med-and-down：在中等及更小屏幕上隐藏菜单项。
• sidenav-trigger：触发侧边栏菜单，适用于移动端。

3. 添加移动端侧边栏导航

为适配手机设备，需要定义一个侧边栏菜单，并通过JavaScript激活：

<ul class="sidenav" id="mobile-nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">联系</a></li>
</ul>

然后初始化侧边栏：

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    M.Sidenav.init(elems);
  });
</script>

4. 增强样式与功能

可以进一步美化导航栏：

• 使用blue、teal等颜色类设置主题色：<nav class="blue"></nav>。
• 添加搜索框：<form><input type="text" placeholder="搜索..."></form> 放入nav-wrapper中。
• 支持下拉菜单：结合dropdown-trigger和data-target实现子菜单。

基本上就这些。利用Materialize的响应式类和组件系统，无需写额外CSS，就能快速搭建出兼容多设备的导航栏。关键是理解其类名逻辑和JavaScript初始化机制。