Html & Css İle Açılır Kapanır Akordeon Menü Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu uygulamayı gerçekleştirmek için herhangi bir özel yazılım kurulumuna ihtiyacınız yoktur. Modern bir metin editörü (VS Code gibi) ve güncel bir web tarayıcısı (Chrome, Firefox, Edge veya Safari) yeterlidir. 2026 yılı itibarıyla, tarayıcıların desteklediği yerel Html etiketleri, JavaScript kullanmadan bile akordeon mantığını kurmamıza olanak tanır.

• Metin Editörü: Kodlarınızı yazmak için temiz bir çalışma alanı.
• Tarayıcı: Geliştirici araçlarını (F12) kullanarak Css testleri yapabileceğiniz bir ortam.
• Temel Bilgi: Html etiket yapısı ve Css seçicileri (class, id, pseudo-classes) hakkında başlangıç seviyesinde bilgi.

Adım 1: Temel Html Yapısını Kurma

Akordeon menü için en modern ve erişilebilir yöntem, Html5 ile gelen details ve summary etiketlerini kullanmaktır. Bu etiketler, tarayıcıya "bu içerik açılıp kapanabilir" bilgisini kendiliğinden verir.

  
    Soru 1: Akordeon nedir?
    
Akordeon, içeriğin bir başlık altında gizlendiği ve tıklandığında genişlediği bir arayüz bileşenidir.
  

Burada details kapsayıcı görevi görürken, summary etiketi tıklanabilir başlık alanını temsil eder. Bu yapı, tarayıcılar tarafından otomatik olarak "açık/kapalı" durumlarını yönetir.

Adım 2: Css ile Görünümü Şekillendirme

Html yapısı işlevseldir ancak görsel olarak zayıftır. Şimdi, Css kullanarak akordeonumuza modern bir görünüm kazandıralım. Özellikle summary içindeki varsayılan üçgen işaretini kaldırmak veya değiştirmek yaygın bir ihtiyaçtır.

.accordion {
  max-width: 600px;
  margin: 20px auto;
  border: 1px solid #ddd;
  border-radius: 8px;
}

summary {
  padding: 15px;
  cursor: pointer;
  font-weight: bold;
  list-style: none; /* Varsayılan üçgeni gizler */
}

summary::-webkit-details-marker {
  display: none; /* Bazı tarayıcılarda işaretçiyi gizler */
}

Bu Css kodları, akordeonun genişliğini sınırlayarak ortalar ve tıklanabilir başlık alanına el işareti (pointer) ekleyerek kullanıcı etkileşimini güçlendirir.

Adım 3: İkon ve Animasyon Ekleme

Kullanıcıların menünün açılıp kapandığını anlaması için görsel bir geri bildirim gereklidir. Css transition özelliği ile içeriğin yumuşak bir şekilde açılmasını sağlayabiliriz.

details[open] summary::after {
  content: '-';
}

summary::after {
  content: '+';
  float: right;
}

details {
  transition: all 0.3s ease;
}

Bu örnekte, details etiketi open durumuna geçtiğinde başlığın sonuna bir eksi işareti eklenir. Bu, kullanıcının menü durumunu anlamasını kolaylaştıran basit ama etkili bir yöntemdir.

Karşılaştırma: Yöntemler Arasındaki Farklar

Akordeon menü yaparken farklı yaklaşımlar mevcuttur. Aşağıdaki tablo, 2026 standartlarına göre yöntemlerin avantajlarını göstermektedir.

Adım 4: İçerik Güvenliği ve Erişilebilirlik

Web projelerinizde kullanıcıdan veri alıyorsanız veya dinamik içerik yüklüyorsanız, XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olmalısınız. Kullanıcı girdilerini doğrudan Html içine basmak tehlikelidir.

Güvenlik Uyarısı: Eğer akordeon içeriklerini bir veritabanından çekiyorsanız, verileri mutlaka sanitize edin. Html etiketlerini doğrudan sayfaya basarken 'escape' fonksiyonlarını kullanarak XSS açıklarını engelleyin.

/* Erişilebilirlik için odaklanma stili */
summary:focus {
  outline: 2px solid #007bff;
  outline-offset: -2px;
}

Erişilebilirlik (A11y), klavye kullanan kullanıcılar için hayati önem taşır. Yukarıdaki kod, kullanıcı "Tab" tuşuyla gezindiğinde menülerin vurgulanmasını sağlar.

Adım 5: Gelişmiş Css Seçicileri ile Tasarım

Birden fazla akordeon öğesini yan yana veya alt alta şık bir şekilde dizmek için nth-child seçicilerini kullanabilirsiniz. Bu, menülerinize profesyonel bir görünüm katar.

.accordion details:not(:last-child) {
  border-bottom: 1px solid #eee;
}

.accordion details[open] {
  background-color: #f9f9f9;
}

Bu Css bloğu, son öğe hariç her öğenin altına bir çizgi çizer ve açık olan menünün arka planını hafifçe renklendirerek kullanıcının odaklandığı alanı belirginleştirir.

Sıkça Sorulan Sorular

Akordeon menü mobilde neden yavaş çalışır?

Genellikle çok fazla içerik veya ağır görseller kullanıldığında yavaşlama olur. İçerikleri 'lazy loading' (tembel yükleme) ile yüklemek performansı artırır.

JavaScript kullanmadan açılan menüleri otomatik kapatabilir miyim?

Yerel details etiketi ile bunu yapmak zordur. Bunun için name özniteliği (attribute) kullanarak gruplama yapabilirsiniz, ancak tam bir "tek seferde tek menü" mantığı için küçük bir JavaScript fonksiyonu gerekebilir.

SEO açısından bu yapı uygun mudur?

Evet, Google arama motoru details ve summary etiketlerini anlar ve içindeki içeriği indeksler. Bu, sayfalarınızın SEO performansı için oldukça olumludur.

Tarayıcı desteği nasıldır?

2026 yılı itibarıyla tüm modern tarayıcılar (Chrome, Firefox, Safari, Edge) details ve summary etiketlerini tam desteklemektedir.

İçeriğe görsel ekleyebilir miyim?

Elbette, details etiketi içinde istediğiniz Html etiketini (görsel, tablo, liste) kullanabilirsiniz.

Sorumluluk Reddi: Bu kılavuzdaki kodlar eğitici amaçlıdır. Üretim ortamında (production) kullanmadan önce tarayıcı testlerini yapmalı ve güvenlik protokollerinizi gözden geçirmelisiniz.

Akordeon Menülerde Performans Optimizasyonu ve İleri İpuçları

Akordeon menü yapınız büyüdükçe, sayfa yüklenme süreleri ve tarayıcı render performansı kritik bir hale gelir. Özellikle içerik yoğunluklu sayfalarda, details ve summary etiketlerinin tarayıcı tarafından nasıl işlendiğini anlamak, kullanıcı deneyimini doğrudan etkiler.

Render Performansını Artırma

Eğer akordeon içinde çok sayıda görsel veya ağır tablo verisi barındırıyorsanız, tarayıcı bu öğeleri sayfa açılışında yüklemeye çalışabilir. Bunu engellemek için loading="lazy" özniteliğini kullanmak, kaynak tüketimini ciddi oranda düşürür. Ayrıca, CSS geçişlerinde height: auto yerine sabit değerler veya grid-template-rows kullanarak animasyonların "layout thrashing" (düzen sarsıntısı) yaratmasını önleyebilirsiniz.

/* Performans odaklı animasyon örneği */
.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
}

details[open] .accordion-content {
  grid-template-rows: 1fr;
}

Hata Ayıklama ve Tarayıcı Uyumluluk Testleri

Akordeon menünüzün tüm platformlarda hatasız çalışması için geliştirme sürecinde belirli test senaryolarını uygulamanız gerekir. Özellikle eski tarayıcılar veya ekran okuyucular (screen readers) ile yapılan testler, erişilebilirlik puanınızı belirler.

Yaygın Hata Senaryoları ve Çözümleri

• Focus Sorunları: Kullanıcı klavye ile tab tuşuna bastığında summary etiketine odaklanamıyorsa, CSS ile outline özelliğini tamamen kaldırmış olabilirsiniz. Bunu asla yapmayın; outline: none yerine outline: 2px solid blue gibi görünür bir odak stili tanımlayın.
• İç İçe Akordeonlar: Bir details etiketi içine başka bir details etiketi yerleştirdiğinizde, CSS seçicilerinizin (özellikle > operatörü) kapsayıcıyı bozmadığından emin olun.
• CSS Çakışmaları: Eğer projenizde Bootstrap veya Tailwind gibi kütüphaneler varsa, details ve summary etiketlerinin varsayılan tarayıcı stillerini (marker gibi) sıfırladığınızdan emin olun.

İpucu: Akordeon menünüzün mobil cihazlarda dokunmatik hassasiyetini artırmak için summary etiketine padding vererek tıklanabilir alanı genişletin. Küçük bir metin alanı, mobil kullanıcılar için sinir bozucu bir deneyim yaratabilir.

Sonuç

Html ve Css ile akordeon menü yapmak, modern web geliştirmenin en temel ve verimli pratiklerinden biridir. Bu rehberde, details ve summary etiketlerini kullanarak nasıl temiz, erişilebilir ve SEO dostu bir yapı kuracağınızı öğrendiniz. Bir sonraki adım olarak, bu yapıya CSS Grid veya Flexbox kullanarak daha karmaşık düzenler ekleyebilir, ardından JavaScript ile menülerin açılış hızlarını veya "tek seferde sadece bir menü açık kalsın" gibi özel işlevleri yönetebilirsiniz. Başarılar dilerim.