Materialize 的下拉菜单类有哪些?

htmlweb developmentfront end technology更新于 2024/5/21 8:12:17

Materialize 是一个前端开发框架，开发者可以使用它来设置网页样式，它遵循 Google 的 Material Design 指南。它包含不同的 HTML 组件，这些组件使用 CSS 预先设计，并使用 JavaScript 预先实现功能，下拉菜单就是其中之一。

当开发者希望允许应用程序用户从所有可用选项中选择一个或多个选项时，下拉菜单就非常有用。它提供了一个基本的预设样式下拉菜单;但是，我们可以对其进行自定义。

此外，下拉菜单还有一些属性可供我们自定义。例如，"isOpen"属性会根据下拉菜单是打开还是关闭返回一个布尔值。 'focusIndex' 属性返回我们聚焦的项目的索引号。

在这里，我们将学习如何使用 Materialize 的下拉菜单。

语法

用户可以按照以下语法使用 Materialize 类创建下拉菜单。

<a class='dropdown-button btn' href='#' data-activates='drop_id'> 标题 </a>
<ul id='drop_id' class='dropdown-content'>
// 在此处添加下拉项
    </ul>

在上述语法中，"<a>"标签是一个下拉按钮，我们为其添加了"dropdown-button"和"btn"类，这两个类始终必不可少。此外，我们为"data-activates"和"id"属性设置了相同的值。

我们创建了无序列表，并为下拉菜单内容添加了"dropdown-content"类名，以便正确设置其样式。

示例 1(使用 Materialize 的基本下拉菜单)

以下示例通过 CDN 将 CSS Materialize 库添加到 <head> 部分。但是，如果用户使用任何前端框架，他们可以在项目中安装它。

我们通过向 HTML 元素添加所需的类，在 HTML 中创建了基本的下拉菜单。此外，我们还在无序列表中添加了下拉选项。在输出中，用户可以观察到，当他们点击下拉按钮时，会打开下拉菜单，而当他们点击外部时，会关闭菜单。

<html>
<head>
   <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons" />
   <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
   <script type = "text/javascript" src = "https://code.jquery.com/jquery-3.6.4.min.js"> </script>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script>
</head>
<body>
   <h4>Using the materialize CSS to create a basic dropdown in CSS </h4>
   <a class = 'dropdown-button btn' href = '#' data-activates = 'dropdown'> Basic Dropdown </a>
   <ul id = 'dropdown' class = 'dropdown-content'>
   <li> <a href="#"> First option </a> </li>
   <li> <a href="#"> Second Option </a> </li>
   <li> <a href = "#"> Third Option </a> </li>
   </ul>
</body>
</html>

示例 2(通过添加 Materialize 类自定义下拉菜单)

在下面的示例中，我们通过添加更多 Materialize 类自定义了下拉菜单。首先，我们创建了汽车下拉菜单。我们为第一个选项添加了"card"类，以突出显示该选项。用户还可以仅为选定的选项添加"card"类名。

此外，我们还添加了一个空选项，其类名为"divider"，以便在两个选项之间添加分隔线。用户可以在输出中观察到最后一个选项和倒数第二个选项之间的分隔线。

<html>
<head>
   <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons" />
   <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
   <script type = "text/javascript" src = "https://code.jquery.com/jquery-3.6.4.min.js"> </script>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script>
</head>
<body>
   <h4> Using the materialize CSS to create Basic dropdown in CSS </h4>
   <a class = 'dropdown-button btn' href = '#' data-activates = 'cars'> Select Car Brand <i class = "mdi-navigation-arrow-drop-down"> </i> </a>
   <ul id = 'cars' class = 'dropdown-content'>
      <li> <a href = "#" class = "card badge"> BMW </a> </li>
      <li> <a href = "#"> Audi </a> </li>
      <li> <a href = "#"> TATA </a> </li>
      <li class = "divider"> </li>
      <li> <a href = "#"> BRL </a> </li>
   </ul>
</body>
</html>

示例 3(使用 JQuery 自定义 Materialize 下拉菜单)

在下面的示例中，我们使用 JQuery 自定义了 Materialize 下拉菜单。在 JQuery 中，我们使用类名选中了下拉按钮，并通过传递包含各种属性的对象作为参数来执行 dropdown() 方法。

在代码中，我们通过注释解释了每个属性的作用，用户可以在输出中观察其效果。

<html>
<head>
   <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons" />
   <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
   <script type = "text/javascript" src = "https://code.jquery.com/jquery-3.4.6.min.js"> </script>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script>
</head>
<body>
   <h4> Using the materialize CSS to create a dropdown in CSS </h4>
   <a class = 'dropdown-button btn' href = '#' data-activates = 'gender'> Select Gender <I class = "mdi-navigation-arrow-drop-down"> </i> </a>
   <ul id = 'gender' class = 'dropdown-content'>
      <li> <a href = "#"> Male </a> </li>
      <li> <a href = "#"> Female </a> </li>
      <li class = "divider"> </li>
      <li> <a href = "#"> Others </a> </li>
   </ul>
   <script>
      $('.dropdown-button').dropdown({
            inDuration: 1000, // 打开下拉菜单的持续时间(毫秒)
            outDuration: 1000, // 关闭下拉菜单的持续时间(毫秒)
            constrain_width: false, // 下拉菜单的宽度不会根据下拉按钮的宽度改变。
            hover: true, // 鼠标悬停时打开下拉菜单。
            alignment: 'right', // 将下拉菜单设置为右对齐。
         }
      );
   </script>
</body>
</html>

用户学习了如何使用 Materialize 类来自定义下拉菜单。我们只需要将正确的 Materialize 类名与 HTML 元素结合使用，即可将其转换为下拉菜单。不过，用户可以使用各种方法通过 JQuery 自定义下拉菜单，就像我们在上一个示例中所做的那样。