Vật chất hóa - Trình đơn thả xuống

Materialize cung cấp lớp CSS thả xuống để tạo phần tử ul làm danh sách thả xuống và thêm id của phần tử ul vào thuộc tính kích hoạt dữ liệu của nút hoặc phần tử neo. Bảng sau đây đề cập đến các lớp có sẵn và tác dụng của chúng.

Sr.No. Tên & Mô tả Lớp học
1

dropdown-content

Xác định ul như một thành phần thả xuống cụ thể hóa. Bắt buộc đối với phần tử ul.

2

data-activates

id của phần tử ul thả xuống.

Thí dụ

Sau đây là một ví dụ về việc sử dụng trình đơn thả xuống.

materialize_dropdowns.htm

<!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.jquery.com/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 Demo</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>

Kết quả

Xác minh kết quả.