Datafon | Sunucu Kiralama, Sunucu Barındırma
Önceki Makale
- Anasayfa
- Hazır Site Bileşenleri
- HTML ve CSS ile Dropdown Buton Yapımı
HTML ve CSS ile Dropdown Buton Yapımı
Savaş Dersim Çelik
|
Cuma Aralık 30th, 2016
|
Yorum Yok
|
4.210 Görüntülenme
|
0 Like
Merhaba arkadaşlar HTML ve CSS ile mouse’nizi butonun üzerine getirince bir liste açılmasını istiyorsanız bunu aşağıda sizler ile paylaşacağımız kodlar yardımı ile yapabilirsiniz. Uzun ve karmaşık bir menü veya ara yüz tasarımından kurtulabilirsiniz.
HTML Kodlarımız
<div class="dropdown"> <button class="dropbtn">Açılır Button</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div>
CSS Kodlarımız
.dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; }
-
-
Online Bahis Siteleri İncelemeleri Sonraki Makale
Konu İle İlgili Soru, Görüş ve Öneriler