HTML ve CSS ile Dropdown Buton Yapımı

[ibrahim6516]

---

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

 

[Replicant]

Paylaşım için teşekkürler