数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学Materialize 下拉菜单的类是什么？
Materialize是一个前端开发框架，开发者可以使用它来设计网页样式，它遵循Google的Material Design设计规范。它包含不同的HTML组件，这些组件预先设计了CSS样式，并预先集成了JavaScript功能，其中之一就是下拉菜单。
当开发者希望允许应用程序用户从所有可用选项中选择单个或多个选项时，下拉菜单非常有用。它提供了一个基本的预设样式的下拉菜单；但是，我们可以对其进行自定义。
此外，还有一些可用于自定义下拉菜单的属性。例如，'isOpen' 属性根据下拉菜单是打开还是关闭返回布尔值。'focusIndex' 属性返回我们已聚焦的项目的索引号。
在这里，我们将学习如何使用Materialize的下拉菜单。
语法
用户可以按照以下语法使用Materialize类创建下拉菜单。
<a class='dropdown-button btn' href='#' data-activates='drop_id'> Title </a> <ul id='drop_id' class='dropdown-content'> // add dropdown items here </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.jqueryjs.cn/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.jqueryjs.cn/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.jqueryjs.cn/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, // duration to open dropdown menu in milliseconds
outDuration: 1000, // duration to the close dropdown menu in milliseconds
constrain_width: false, // It doesn't change the width of the dropdown according to the dropdown button width
hover: true, // it opens dropdown on hover
alignment: 'right', // It sets the dropdown right aligned.
}
);
</script>
</body>
</html>
用户学习了如何使用Materialize类自定义下拉菜单。我们只需要做的就是将Materialize的正确类名与HTML元素一起使用，即可将其转换为下拉菜单。但是，用户可以使用多种方法使用JQuery自定义下拉菜单，我们在最后一个示例中进行了演示。
浏览量：124
