xranzei 1
xranzei
Bvural41 1
Bvural41
D 1
delimuratt
ShadowFon 1
ShadowFon
shrpnl 1
shrpnl
DEVLOPER 1
DEVLOPER
Manwe Work 1
Manwe Work
Agora Metin2 1
Agora Metin2
Karan2offical 1
Karan2offical
mavzermete 1
mavzermete
M 1
m2referencee
Fethi Polat 1
Fethi Polat
Hikaye Ekle

HTML ve CSS ile Dropdown Buton Yapımı

  • Konuyu başlatan Konuyu başlatan ibrahim6516
  • Başlangıç tarihi Başlangıç tarihi
  • Cevaplar Cevaplar 1
  • Görüntüleme Görüntüleme 464

ibrahim6516

EFSANE · 16 · Konum Bursa
Telefon Numarası Onaylanmış Üye TC Kimlik Numarası Doğrulanmış Üye
Fahri Üye
TM Üye
Katılım
8 Eki 2012
Konular
555
Mesajlar
1,301
Online süresi
2mo 3d
Reaksiyon Skoru
718
Altın Konu
68
TM Yaşı
13 Yıl 8 Ay 14 Gün
Başarım Puanı
282
MmoLira
2,295
DevLira
243
Ticaret - 100%
1   0   0

HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!

html-ve-css-ile-dropdown-yapimi.png


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

Kod:
<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

Kod:
.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;
}
 
Paylaşım için teşekkürler :)
 

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Geri
Üst