HTML’de details ve summary bloğu ile açılır sayfa bölümleri oluşturabiliyoruz. Sıkça sorulan sorular (f.a.q) gibi kısımlarda UI ve UX çalışmalarında işlevselliği arttırmak için bu yapıyı sık kullanırız.
Ayrıca SEO çalışmalarında aşırı içeriği sayfada daha derli toplu hale getirmek için de bu yapıyı sık sık kullanıyorum.
<details> <summary>Açılır buton</summary> <p>Bölüm açıldığında gösterilecek yazı burada yer alacak.</p> </details>
Önizleme
Açılır buton
Bölüm açıldığında gösterilecek yazı burada yer alacak.
Şimdi Açılır bölümümüze biraz stil kazandıralım.Bunun için CSS kodları yazmamız gerektiğini biliyoruz. Dilersek html içerisinde style tagi ile de halledebiliriz. Bunun için;
details {} ve summary {} etiketleri lerine,
background-color:
color:
font-size:
border-radius:
gibi tanımlamalar yapacağım.
<meta charset="UTF-8">
<title>Açılır Button HTML 5 ile Nasıl Yapılır</title>
<style type="text/css">
summary {
background-color:#7a7efd;
color:#fcf6bc;
font-size:24px;
border-radius: 5px;
}
details {
background-color:##faf7e0;
color:#7a7efd;
font-size:14px;
border-radius: 5px;
}
</style>
</head>
<body>
<details>
<summary>Açılır buton</summary>
<p>Bölüm açıldığında gösterilecek yazı burada yer alacak.</p>
</details>
</body>Önizleme:
Açılır buton
Bölüm açıldığında gösterilecek yazı burada yer alacak.
Hocam selam sitenden güzel faydalanıyorum ama bu makaledeki açılır butonla ilgili bir sorum var. imleç butonun üzerine gelince parmak olan imlece dönmesini istiyorum ama beceremedim.