CSS框架Materialize如何制作响应式导航栏_使用Materialize组件快速搭建导航-css教程-PHP中文网

CSS框架Materialize如何制作响应式导航栏_使用Materialize组件快速搭建导航

P粉602998670

发布： 2025-11-23 20:21:05

原创

366人浏览过

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

css框架materialize如何制作响应式导航栏_使用materialize组件快速搭建导航

使用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>

登录后复制

说明：

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

有道智云AI开放平台

116

查看详情

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>

登录后复制