Materialize CSS 框架中 Navbar 的使用详解

class Navbar

Materialize CSS 框架中 Navbar 的使用详解

Navbar（导航栏） 是网站和应用程序中的一个重要组件，它提供了对网站主要部分的快速访问。Materialize CSS 框架提供了强大的 Navbar 组件，允许开发者创建响应式且功能丰富的导航栏。本文将详细介绍如何在 Materialize CSS 框架中使用 Navbar，包括基本用法、响应式设计、自定义样式以及实际应用示例。

1. 基本 Navbar 使用

Materialize CSS 的 Navbar 组件使得创建一个简单的导航栏变得非常容易。它支持链接、品牌标识和导航菜单。

示例：基本 Navbar

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Navbar 示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <style>
    .navbar-fixed {
      z-index: 1000; /* 确保导航栏在其他元素之上 */
    }
  </style>
</head>
<body>

  <!-- Navbar -->
  <nav>
    <div class="nav-wrapper blue">
      <a href="#" class="brand-logo">品牌名</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="#home">主页</a></li>
        <li><a href="#about">关于我们</a></li>
        <li><a href="#services">服务</a></li>
        <li><a href="#contact">联系</a></li>
      </ul>
    </div>
  </nav>

  <div class="container">
    <h4>欢迎访问我们的网页</h4>
    <p>这是一个基本的 Materialize Navbar 示例。</p>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

解释：

  • 使用 nav 标签定义导航栏。
  • nav-wrapper 类包裹导航栏的内容，设置背景颜色。
  • brand-logo 类用于设置品牌标识（可以是公司名称或 logo）。
  • ul 列表包含导航链接，hide-on-med-and-down 类在中等及以下屏幕上隐藏这些链接。

2. 响应式 Navbar

Materialize 的 Navbar 支持响应式设计，可以根据屏幕尺寸调整显示效果。例如，在较小的屏幕上，导航链接会被折叠到一个下拉菜单中。

示例：响应式 Navbar

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式 Navbar 示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <style>
    .sidenav {
      width: 250px; /* 自定义侧边菜单宽度 */
    }
  </style>
</head>
<body>

  <!-- Navbar -->
  <nav>
    <div class="nav-wrapper blue">
      <a href="#" class="brand-logo">品牌名</a>
      <a href="#" data-target="mobile-nav" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="#home">主页</a></li>
        <li><a href="#about">关于我们</a></li>
        <li><a href="#services">服务</a></li>
        <li><a href="#contact">联系</a></li>
      </ul>
    </div>
  </nav>

  <!-- Sidenav (侧边菜单) -->
  <ul class="sidenav" id="mobile-nav">
    <li><a href="#home">主页</a></li>
    <li><a href="#about">关于我们</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>

  <div class="container">
    <h4>欢迎访问我们的网页</h4>
    <p>这是一个响应式 Materialize Navbar 示例。</p>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.sidenav');
      var instances = M.Sidenav.init(elems, {});
    });
  </script>
</body>
</html>

解释：

  • 使用 sidenav 组件创建响应式侧边菜单。
  • sidenav-trigger 类用于触发侧边菜单的按钮。
  • 在 JavaScript 中初始化侧边菜单，以确保其功能正常。

3. 嵌套菜单

Materialize 的 Navbar 允许嵌套菜单，以便在导航栏中创建更多层级的菜单。

示例：嵌套菜单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>嵌套菜单示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <style>
    .dropdown-content {
      max-height: 200px; /* 限制下拉菜单的最大高度 */
      overflow-y: auto; /* 显示滚动条 */
    }
  </style>
</head>
<body>

  <!-- Navbar -->
  <nav>
    <div class="nav-wrapper blue">
      <a href="#" class="brand-logo">品牌名</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="#home">主页</a></li>
        <li><a href="#about">关于我们</a></li>
        <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">服务<i class="material-icons right">arrow_drop_down</i></a></li>
        <li><a href="#contact">联系</a></li>
      </ul>
    </div>
  </nav>

  <!-- Dropdown Menu -->
  <ul id="dropdown1" class="dropdown-content">
    <li><a href="#!">Web 开发</a></li>
    <li><a href="#!">移动开发</a></li>
    <li><a href="#!">UI/UX 设计</a></li>
  </ul>

  <div class="container">
    <h4>欢迎访问我们的网页</h4>
    <p>这是一个具有嵌套菜单的 Materialize Navbar 示例。</p>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.dropdown-trigger');
      var instances = M.Dropdown.init(elems, {});
    });
  </script>
</body>
</html>

解释：

  • 使用 dropdown-trigger 类创建下拉菜单触发器。
  • dropdown-content 类用于定义下拉菜单的内容。
  • 在 JavaScript 中初始化下拉菜单，以确保其功能正常。

4. 自定义 Navbar 样式

Materialize 的 Navbar 组件可以通过 CSS 自定义样式，以符合你的设计需求。

示例：自定义 Navbar 样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义 Navbar 样式示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <style>
    .custom-nav {
      background-color: #ff5722; /* 自定义背景颜色 */
    }
    .custom-nav .brand-logo {
      font-family: 'Arial', sans-serif; /* 自定义品牌字体 */
    }
    .custom-nav .nav-wrapper a {
      color: #ffffff; /* 自定义链接颜色 */
    }
    .custom-nav .nav-wrapper a:hover {
      color: #000000; /* 自定义链接悬停颜色 */
    }
  </style>
</head>
<body>

  <!-- Navbar -->
  <nav class="custom-nav">
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">品牌名</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="#home">主页</a></li>
        <li><a href="#about">关于我们</a></li>
        <li><a href="#

services">服务</a></li>
        <li><a href="#contact">联系</a></li>
      </ul>
    </div>
  </nav>

  <div class="container">
    <h4>欢迎访问我们的网页</h4>
    <p>这是一个具有自定义样式的 Materialize Navbar 示例。</p>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

解释：

  • 使用 custom-nav 类自定义导航栏的背景颜色、品牌字体、链接颜色和悬停效果。

结论

Materialize CSS 框架中的 Navbar 组件为开发者提供了创建响应式且功能丰富的导航栏的工具。通过基本使用、响应式设计、嵌套菜单、自定义样式等功能，你可以轻松实现符合需求的导航栏布局。利用这些功能，你可以提升网站的用户体验和视觉效果，使导航更加直观和易于使用。

chat评论区
评论列表
menu