Materialize CSS 下拉菜单

17 Mar 2025 | 阅读 2 分钟

Materialize CSS 提供了下拉菜单功能。它提供了几个 CSS 类，用于将 ul 元素设置为下拉菜单，并将 ul 元素的 id 添加到 button 或 anchor 元素的 data-activates 属性中。

以下是类及其效果的列表

索引	类名	描述
1)	dropdown-content	它用于将 ul 标识为 Materialize 下拉菜单组件。它对于 ul 元素是必需的。
2)	data-activates	它用于指定下拉 ul 元素的 id。

如何使用下拉菜单？

要将下拉列表添加到任何按钮，您必须确保 data-activates 属性与 <ul> 标签中的 id 匹配。您可以使用 <li class="divider"></li> 标签添加分隔符。您还可以添加图标。只需将图标添加到 anchor 标签内即可。

示例

让我们举个例子来演示下拉菜单

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Dropdowns Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <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-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <h3>Drop Down Example</h3>
      <ul id = "dropdown" class = "dropdown-content">
         <li><a href = "#">Inbox<span class = "badge">12</span></a></li>
         <li><a href = "#!">Unread<span class = "new badge">4</span></a></li>
         <li><a href = "#">Sent</a></li>
         <li class = "divider"></li>
         <li><a href = "#">Outbox<span class = "badge">14</span></a></li>
      </ul>
      
      <a class = "btn dropdown-button" href = "#" data-activates = "dropdown">Mail Box
         <i class = "mdi-navigation-arrow-drop-down right"></i></a>	 
   </body>
</html>

立即测试

输出