HTML5 ile Açılır - Kapanır Uyugulama details Etiketi

<details> etiketi, başlangıçta gizlenen, ancak kullanıcı görmek isterse görüntülenebilecek içerik / bilgi için kullanılır. Bu etiket, kullanıcının açabileceği veya kapatabileceği etkileşimli pencere öğesi oluşturmak için kullanılır. details etiketinin içeriği, ayarlanan özellikleri açtığınızda görülebilir.

Aslında bu etkileşimi sık sık görüyoruz, Genelde javascript ve Kütüphanesi JQuery kullanarak yapıyorduk. Şimdi, bu yeni HTML5 details ve summary öğelerini kullanarak işler daha kolay olacak.


<details>
  <summary>Lorem Ipsum Nedir?</summary>
  <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>
  <p>Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek 
  değişmeden elektronik dizgiye de sıçramıştır. </p>
</details>

ÇIKTI:



Lorem Ipsum Nedir? TIKLA!

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır.



Etikete Özel Nitelikler

Aşağıdaki tabloda, <details> etikete özgü özellikleri gösterilmektedir.

Nitelik Değer Açıklama
open open Bu Boolean özelliği, ayrıntıların sayfa yüklendiğinde kullanıcıya görünüp görünmeyeceğini belirler. Varsayılan değer false, dolayısıyla ayrıntılar gizlenir.

Açık Biçiminde Açıklama Kutusu Oluşturma

Details Etiketi varsayılan olarak kapalı şekilde tanımlanır; Ancak Boolean open niteliğini ekleyin o içeriğin açık halde başlamasını tanımlar.


<details open>
  <summary>Lorem Ipsum Nedir?</summary>
  <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>
  <p>Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek 
  değişmeden elektronik dizgiye de sıçramıştır. </p>
</details>

ÇIKTI:



Lorem Ipsum Nedir? TIKLA!

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır.



Şimdi details etiketini css ile özelleştirip Akerdion menü haline getirelim.


CSS:


.akerdion {
border: 1px solid #999;
border-radius: 5px;
margin:2px;
padding: 1.04%;
} 
.ozet {
border-radius: 5px;
cursor: pointer;
margin: -1%;
padding: 8px 10px;
background: -webkit-linear-gradient(top, #f3f3f3 50%, #e6e6e6 50%);
}
	

HTML:


<details class="akerdion">
  <summary class="ozet" >BAŞLIK 1</summary>
  <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>
</details>

<details class="akerdion">
  <summary class="ozet" >BAŞLIK 2</summary>
  <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>
</details>

<details class="akerdion">
  <summary class="ozet" >BAŞLIK 3</summary>
  <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>
</details>


BAŞLIK 1

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

BAŞLIK 2

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

BAŞLIK 3

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.



Akerdionun "ok" işeretini, css ile Açıkken "-" işareti kapalıyken "+" işareti yapalım.


/* Chrome, Opera, Safari */
details summary::-webkit-details-marker {
display: none;
}
/* Firefox */
details, summary {
display: block;
}
details summary:before {
content: " + ";
}
details[open] summary:before {
content: " - ";
}

ÇIKTI:

BAŞLIK 1

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

BAŞLIK 2

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

BAŞLIK 3

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

9284

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.