Materialize是一个前端开发框架，开发人员可以使用它来为网页添加样式，它遵循Google的材料设计准则。它包含了不同的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”类名，以便正确地进行样式设置。
下面的示例展示了通过CDN将CSS materialize库添加到<head>部分。然而，如果用户使用任何前端框架，他们可以在项目中安装它。
我们通过向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>
在下面的示例中，我们通过添加更多 Materialize 类来自定义下拉菜单。首先，我们创建了汽车下拉菜单。我们已将“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>
在下面的示例中，我们使用 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, // 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自定义下拉菜单，这在上一个示例中已经完成。
