- Konu sahibi
- #1
Açılır menü için en kısa ve erişilebilir yöntem, HTML5’in yerleşik
Aşağıdaki örneği bir HTML dosyasına kaydedip tarayıcıda açın.
Dosyayı kaydedip tarayıcıda açtığınızda yalnızca “Menüyü aç” metnini görürsünüz. Bu metne tıklanınca bağlantılar görünür. Bağlantılardan birine tıklamak,
Menünün sayfa açıldığında doğrudan açık olmasını istiyorsanız
Buradaki
HTML yapısı menünün işlevini sağlar. Renk, boşluk, kenarlık ve bağlantı görünümü için CSS ekleyebilirsiniz. Aşağıdaki örnekte bağlantılar dikey bir menü olarak gösterilir:
Bu örnekte CSS,
Bu ayrım önemlidir: basit, tıklamayla açılıp kapanan bir menü için yalnızca HTML yeterlidir; gelişmiş etkileşimli navigasyon menüsü için HTML’ye CSS ve gerektiğinde JavaScript eklenir. JavaScript ile özel bir menü oluştururken klavye odağı, Escape tuşuyla kapatma, odak görünümü ve mobil ekran davranışı ayrıca ele alınmalıdır.
Dosyayı tarayıcıda açtıktan sonra şu sırayla kontrol edin:
Sayfanın ana navigasyonunda çok sayıda alt menü, mobilde hamburger menü, fareyle açılan alt menüler veya animasyonlu bir panel gerekiyorsa
Tek bir yardım metnini, SSS bölümünü veya az sayıda bağlantıyı açıp kapatmak içinse
<details> ve <summary> öğelerini kullanmaktır. Kullanıcı <summary> metnine tıkladığında içerik görünür, tekrar tıkladığında kapanır; JavaScript yazmanız gerekmez. Menüde birden fazla bağlantı veya seçenek göstermek istiyorsanız bu yapıyı bir listeyle birlikte kullanabilirsiniz.JavaScript kullanmadan açılır menü oluşturma
Aşağıdaki örneği bir HTML dosyasına kaydedip tarayıcıda açın.
<summary> menünün her zaman görünen başlığıdır; <details> içindeki diğer içerik ise başlangıçta kapalıdır.
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Açılır Menü</title>
</head>
<body>
<details>
<summary>Menüyü aç</summary>
<nav aria-label="Ana menü">
<ul>
<li><a href="index.html">Ana sayfa</a></li>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="iletisim.html">İletişim</a></li>
</ul>
</nav>
</details>
</body>
</html>Dosyayı kaydedip tarayıcıda açtığınızda yalnızca “Menüyü aç” metnini görürsünüz. Bu metne tıklanınca bağlantılar görünür. Bağlantılardan birine tıklamak,
href değerinde yazan HTML dosyasına yönlendirir; dosya adı gerçekten mevcut değilse tarayıcı ilgili sayfayı bulamaz.Menünün sayfa açıldığında doğrudan açık olmasını istiyorsanız
<details> etiketine open niteliğini ekleyin:
HTML:
<details open>
<summary>Menüyü kapat</summary>
<p>Bu içerik sayfa açıldığında görünür.</p>
</details>Buradaki
open niteliği menünün başlangıç durumunu belirler; kullanıcı yine başlığa tıklayarak menüyü kapatıp açabilir. Bu özellik, menüyü kalıcı olarak açık tutmaz.Menüyü CSS ile biçimlendirme
HTML yapısı menünün işlevini sağlar. Renk, boşluk, kenarlık ve bağlantı görünümü için CSS ekleyebilirsiniz. Aşağıdaki örnekte bağlantılar dikey bir menü olarak gösterilir:
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Biçimlendirilmiş Açılır Menü</title>
<style>
details {
width: 220px;
font-family: Arial, sans-serif;
}
summary {
padding: 10px;
background-color: #2563eb;
color: white;
cursor: pointer;
border-radius: 4px;
}
details ul {
margin: 0;
padding: 8px 0;
list-style: none;
border: 1px solid #d1d5db;
border-top: 0;
background-color: #f8fafc;
}
details a {
display: block;
padding: 8px 12px;
color: #111827;
text-decoration: none;
}
details a:hover {
background-color: #e5e7eb;
}
</style>
</head>
<body>
<details>
<summary>Menü</summary>
<ul>
<li><a href="index.html">Ana sayfa</a></li>
<li><a href="urunler.html">Ürünler</a></li>
<li><a href="iletisim.html">İletişim</a></li>
</ul>
</details>
</body>
</html>Bu örnekte CSS,
<details> öğesini menü kutusuna, <summary> öğesini de tıklanabilir başlığa dönüştürür. CSS eklenmese bile açılır menü çalışır; yalnızca varsayılan tarayıcı görünümü kullanılır.Yatay veya üst üste açılan menü yapmak
<details> yapısı içerikleri normal belge akışında gösterir. Bu nedenle menü açıldığında aşağıdaki içerik genellikle aşağı doğru itilir. Açılan bölümün diğer içeriklerin üzerine gelmesini, ekranın belirli bir noktasına sabitlenmesini veya fareyle üzerine gelince açılmasını istiyorsanız CSS konumlandırması ve çoğu durumda JavaScript gerekir.Bu ayrım önemlidir: basit, tıklamayla açılıp kapanan bir menü için yalnızca HTML yeterlidir; gelişmiş etkileşimli navigasyon menüsü için HTML’ye CSS ve gerektiğinde JavaScript eklenir. JavaScript ile özel bir menü oluştururken klavye odağı, Escape tuşuyla kapatma, odak görünümü ve mobil ekran davranışı ayrıca ele alınmalıdır.
Menünün doğru çalıştığını kontrol etme
Dosyayı tarayıcıda açtıktan sonra şu sırayla kontrol edin:
- Menü kapalıysa yalnızca
<summary>başlığının görünmesi gerekir. - Başlığa tıklayın.
<details>içindeki bağlantı veya metin görünmelidir. - Başlığa yeniden tıklayın. İçeriğin tekrar gizlenmesi gerekir.
- Bağlantıya tıklayın.
hrefdeğerindeki dosya veya adres açılmalıdır.
<summary> etiketinin <details> içinde olduğundan emin olun. Bağlantı görünmesine rağmen hedef sayfa açılmıyorsa açılır menü yapısı çalışıyor demektir; bu kez href içindeki dosya adını, klasör yolunu ve büyük-küçük harf kullanımını kontrol etmeniz gerekir. Menü sayfa açılır açılmaz görünüyorsa open niteliğini kaldırın.Ne zaman farklı bir yapı kullanılmalı?
Sayfanın ana navigasyonunda çok sayıda alt menü, mobilde hamburger menü, fareyle açılan alt menüler veya animasyonlu bir panel gerekiyorsa
<details> yerine özel bir navigasyon bileşeni tasarlamak daha uygun olabilir. Yine de menünün HTML iskeletini <nav>, liste ve bağlantılarla kurmak; görünümü CSS ile, açma-kapama davranışını ise gerektiğinde JavaScript ile yönetmek gerekir.Tek bir yardım metnini, SSS bölümünü veya az sayıda bağlantıyı açıp kapatmak içinse
<details> ve <summary> yeterlidir. Bu yapı, gereksiz JavaScript eklemeden çalışan bir açılır bölüm sağlar; ancak otomatik olarak çok seviyeli, ekranın üzerine açılan veya animasyonlu bir menü tasarımı oluşturmaz.