Canlı Önizleme
Nasıl Kullanılır?
Sıfır Javascript içeren oldukça hafif bir dropdown menü çözümüdür.
Kaynak Kodlar
HTML
<div class="dropdown">
<button class="dropbtn">Seçenekler <i class="fas fa-caret-down"></i></button>
<div class="dropdown-content">
<a href="#"><i class="fas fa-user"></i> Profilim</a>
<a href="#"><i class="fas fa-cog"></i> Ayarlar</a>
<a href="#"><i class="fas fa-sign-out-alt"></i> Çıkış</a>
</div>
</div>CSS
.dropdown { position: relative; display: inline-block; font-family: 'Inter', sans-serif; }
.dropbtn { background-color: #6C5CE7; color: white; padding: 12px 24px; font-size: 16px; border: none; border-radius: 8px; cursor: pointer; transition: 0.3s; }
.dropdown-content { position: absolute; top: calc(100% + 10px); left: 0; background-color: #2a2a35; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); border-radius: 8px; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: all 0.3s ease; }
.dropdown-content a { color: #fff; padding: 12px 16px; text-decoration: none; display: block; transition: 0.2s; }
.dropdown-content a:hover { background-color: rgba(108,92,231,0.2); color: #00cec9; padding-left: 20px; }
.dropdown:hover .dropdown-content { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown:hover .dropbtn { background-color: #5b4cc4; }