giriiş
Kullanıcı bir öğenin üzerine fareyi getirdiğinde görünen bir açılır menü oluşturun.
Adım 1) HTML ekleyin:
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>Örnek açıklandı.
Açılır menüyü açmak için herhangi bir öğeyi kullanın, örneğin bir öğe <button>, <a> Veya <p>.
Bir konteyner elemanından (örneğin <div>) açılır menü oluşturmak ve içine açılır bağlantılar eklemek.
Bir element <div> düğmenin etrafında ve <div> Açılır menünün CSS ile doğru şekilde konumlandırılması için sarın.
Adım 2) CSS ekleyin:
/* Dropdown Button */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}Örnek açıklandı
Kaydırıcı butonunu arka plan rengi, dolgu vb. ile şekillendirdik.
.dropdown sınıfı, açılır menü içeriğini açılır menü düğmesinin hemen altına yerleştirmek gerektiğinde position:relative kullanır (position:absolute kullanılarak).
.dropdown-content sınıfı, asıl açılır menüyü barındırır. Varsayılan olarak gizlidir ve kayan modda görüntülenir (aşağıya bakın). Minimum genişliğin 160 piksel olarak ayarlandığını unutmayın. Bunu değiştirmekten çekinmeyin. İpucu: Açılır menü içeriğinin genişliğinin açılır menü düğmesiyle aynı olmasını istiyorsanız, genişliği 0 olarak ayarlayın (ve küçük ekranlarda kaydırmayı etkinleştirmek için taşma: otomatik).
Kenarlık kullanmak yerine, açılır menünün bir "kart" gibi görünmesini sağlamak için box-shadow özelliğini kullandık. Ayrıca, açılır menüyü diğer öğelerin önüne yerleştirmek için z-index'i kullanıyoruz.
:hover seçicisi, kullanıcı açılır menü düğmesinin üzerine fareyi getirdiğinde açılır menüyü göstermek için kullanılır.
