PHP ile Excel Dosyaları Okuma ve Oluşturma

OnePlus 5 Oreo güncellemesi ile Face Lock kilidini getiriyor

PHP Toplu Mail Gönderme

Apple iPhone X şu anda 14 yeni ülkede satışa sunuluyor

HTML ve CSS ile Dropdown Buton Yapımı

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