Kurumsal Firma Scripti | Alkinoe

Kombi Bakım Servisi Scripti | Alkimedon

Tesisatçı Web Scripti | Alkestis

Spor Salonu Sitesi Scripti | Alkathoos

HTML ve CSS ile Dropdown Buton Yapımı

  • Hazır Site Bileşenleri
  • Savaş Dersim Çelik
  • Cuma Aralık 30th, 2016
  • 1.690 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