CSS / HTML

HTML’de Açılır Buton Details ve Summary

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.

5 3 votes
Article Rating
Subscribe
Bildir
guest
1 Yorum
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
ahmet
ahmet
1 ay önce

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.