Html, css js Canlı Frontend

Html Css ve js dropdown Örneği

Görsel olarak şık, geçişleri yumuşak ve kullanıcı etkileşimi (dışarı tıklandığında kapanma, klavye kullanımı) tam olan modern bir dropdown örneği:

Tartış Arşiv

2026-08-24 21:27:24 CSS 0 tartışma

index.html

<div class="dropdown">
  <button class="dropdown-toggle" id="dropdownBtn" aria-expanded="false">
    <span>Hesap Ayarları</span>
    <svg class="chevron" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="m6 9 6 6 6-6"/>
    </svg>
  </button>
  
  <ul class="dropdown-menu" id="dropdownMenu">
    <li><a href="#profil" class="dropdown-item">Profil Bilgileri</a></li>
    <li><a href="#bildirimler" class="dropdown-item">Bildirimler</a></li>
    <li><a href="#guvenlik" class="dropdown-item">Güvenlik</a></li>
    <li class="divider"></li>
    <li><a href="#cikis" class="dropdown-item danger">Çıkış Yap</a></li>
  </ul>
</div>

style.css

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.dropdown {
  position: relative;
  display: inline-block;
}

/* Buton Tasarımı */
.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background-color: #ffffff;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dropdown-toggle:hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}

.chevron {
  transition: transform 0.2s ease;
}

/* Menü Açıldığında Ok Yönünü Değiştirme */
.dropdown.active .chevron {
  transform: rotate(180deg);
}

/* Menü Tasarımı */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  
  /* Animasyon Başlangıç Durumu */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Menü Açık Durumu */
.dropdown.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Menü Elemanları */
.dropdown-item {
  display: block;
  padding: 8px 12px;
  color: #334155;
  text-decoration: none;
  font-size: 14px;
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-item:hover {
  background-color: #f1f5f9;
  color: #0f172a;
}

.dropdown-item.danger {
  color: #ef4444;
}

.dropdown-item.danger:hover {
  background-color: #fef2f2;
  color: #dc2626;
}

.divider {
  height: 1px;
  background-color: #f1f5f9;
  margin: 6px 0;
}

script.js

const dropdown = document.querySelector('.dropdown');
const dropdownBtn = document.getElementById('dropdownBtn');

// Tıklama ile açma / kapatma
dropdownBtn.addEventListener('click', (e) => {
  e.stopPropagation(); // Tıklamanın document'a yayılmasını önler
  const isActive = dropdown.classList.toggle('active');
  
  // Erişilebilirlik (ARIA) güncellemesi
  dropdownBtn.setAttribute('aria-expanded', isActive);
});

// Sayfa üzerinde başka bir yere tıklandığında menüyü kapatma
document.addEventListener('click', (e) => {
  if (!dropdown.contains(e.target)) {
    dropdown.classList.remove('active');
    dropdownBtn.setAttribute('aria-expanded', 'false');
  }
});

// ESC tuşuna basıldığında menüyü kapatma
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && dropdown.classList.contains('active')) {
    dropdown.classList.remove('active');
    dropdownBtn.setAttribute('aria-expanded', 'false');
    dropdownBtn.focus();
  }
});

TOPLULUK

Tartışma & Sorular

İçerik hakkında soru sor, deneyimini paylaş veya başka bir kullanıcıya yanıt ver.

0 mesaj

İlk mesajı sen yaz.

Henüz bu içerikte bir tartışma başlamadı.