Açılır menü navigasyonu nasıl oluşturulur:
- Önceki sayfa 级联下拉菜单
- 下一页 侧边导航栏中的下拉菜单
Açılır menü navigasyonu oluşturma nasıl yapılır.
Nabardaki açılır menü
Açılır menü navigasyonu oluşturma
Kullanıcı, nabar içindeki öğelere fareniyorsa, bir açılır menü görünür olacaktır.
İlk Adım - HTML Ekle:
<div class="navbar">
<a href="#home">Ana Sayfa</a>
<a href="#news">Haberler</a>
<div class="dropdown">
<button class="dropbtn">Açılır
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Bağlantı 1</a>
<a href="#">Bağlantı 2</a>
<a href="#">Bağlantı 3</a>
</div>
</div>
</div>
Örnek açıklaması:
Açılır menüyü açmak için herhangi bir öğe kullanın, örneğin <button>, <a> veya <p> öğesi.
Açılır menü için konteyner öğesi (örneğin <div>) oluşturun ve içine açılır menü bağlantıları ekleyin.
Düğme ve diğer bir <div> öğesini bir araya getirerek, CSS ile doğru şekilde açılır menü konumlandırma kullanın.
İkinci Adım - CSS Ekle:
/* Nabar konteyneri */
.navbar {
aşırı akış: gizli;
background-color: #333;
font-family: Arial;
}
/* Nabar içindeki bağlantılar */
.navbar a {
yüzeysel: sol;
font-size: 16px;
color: beyaz;
text-align: ortala;
padding: 14px 16px;
text-decoration: none;
}
/* Açılır konteyner */
.dropdown {
yüzeysel: sol;
aşırı akış: gizli;
}
/* Açılır düğme */
.dropdown .dropbtn {
font-size: 16px;
çizgi: yok;
çizgi: yok;
color: beyaz;
padding: 14px 16px;
background-color: miras;
font-family: miras; /* İphone'da dikey hizalama için çok önemlidir */
margin: 0; /* Cep telefonlarındaki dikey hizalama için önemlidir */
}
/* Fare ile üzerine gelindiğinde navigasyon çubuğu bağlantısına kırmızı arka plan rengi ekler */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Açılır menü içeriği (öntanımlı olarak gizlidir) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Açılır menüdeki bağlantılar */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Fare ile üzerine gelindiğinde açılır menü bağlantısına gri arka plan rengi ekler */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Fare ile üzerine gelindiğinde açılır menü göster */
.dropdown:hover .dropdown-content {
display: block;
}
Örnek açıklaması:
Navigasyon çubuğu ve navigasyon çubuğu bağlantıları için arka plan rengi, iç boşluk vb. stillerini ayarladık.
Açılır menü düğmesi için arka plan rengi, iç boşluk vb. stillerini ayarladık.
.dropdown sınıfı .dropdown-content konteyneri. Bu bir <div> elementi, <a> elementi değil, bu yüzden bağlantı yanında kalmak için yüzeysel hale getirmemiz gerekiyor.
.dropdown-content sınıfı gerçek açılır menüyü içerir. Öntanımlı olarak gizlidir ve fare ile üzerine gelindiğinde gösterilir (aşağıda görülecek). Dikkat edin, en küçük genişlik 160px olarak ayarlanmıştır. Bu ayarı rahatlıkla değiştirebilirsiniz.
Kullanmadık, bunun yerine box-shadow Özelliği, açılır menüyü bir 'kart' gibi görünmesini sağlar. Ayrıca z-index Açılır menüyü diğer elementlerin önüne yerleştirin.
:hover Seçici, kullanıcı mouse'u açılır menü düğmesine götürdüğünde açılır menüyü göstermek için kullanılır.
Navigasyon çubuğundaki tıklanabilir açılır menüler
İlgili sayfalar
Rehber:CSS 下拉菜单
Rehber:Tıklanabilir açılır menü nasıl oluşturulur
Rehber:CSS 导航栏
- Önceki sayfa 级联下拉菜单
- 下一页 侧边导航栏中的下拉菜单
