Materialize - Açılır Menüler
Materialise, bir ul öğesini açılır liste olarak yapmak ve ul öğesinin kimliğini düğmenin veya bağlantı öğesinin veri etkinleştirir özelliğine eklemek için açılır CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini göstermektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | dropdown-content Ul'yi somut bir açılır liste bileşeni olarak tanımlar. Ul öğesi için gereklidir. |
| 2 | data-activates açılır ul öğesinin kimliği. |
Misal
Aşağıda, açılır menü kullanımına bir örnek verilmiştir.
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>Sonuç
Sonucu doğrulayın.