RainTPL PHP Template Engine Kullanımı

Türkiye’de Bulunan Bankaların Listesi – JSON | Exel | PHP | SQL

PHP ile MySQL Veritabanı Yedeğini Alma ve Bakım Yapma

Gümüş Takı Seti

HTML ve CSS ile Dropdown Buton Yapımı

  • Hazır Site Bileşenleri
  • Savaş Dersim Çelik
  • Cuma Aralık 30th, 2016
  • 1.372 Görüntülenme
  • HTML, CSS, Javascript
  • Responsive

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;
}

 

Yorumlar

Henüz hiç yorum yapılmamış.

Benzer İçerikler