İç İçe Sırasız Liste Oluşturma

HTML Dersleri > İç İçe Sırasız Liste Oluşturma

Sırasız liste oluşturmayı bir önceki derslerimizde görmüştük. Tekrar etmekte fayda var. Sırasız liste oluştururken <ul> etiketini kullanırız.

Bir liste oluştururken listemizdeki maddelerden birinin alt maddeleri olabilir. Bunun için içe içe listeleri kullanırız. Mantık son derece basittir. Yaptığımız tek şey mevcut bir liste elemanının içerisine girip yeni bir liste oluşturmak.

Konuyu daha iyi anlamak için örnek yapalım ve örneğimizi adım adım inceleyelim.

1. Adım: Listemizi oluşturalım. Listemizin elemanları "İslamın Şartları" ve "İmanın Şartları" olsun.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>İslamın ve İmanın Şartları</title>
  </head>
  <body>
    <ul>
      <li>İslamın Şartları</li>
      <li>İmanın Şartları</li>
    </ul>
  </body>
</html>

2. Adım: Listemizdeki "İslamın Şartları" elemanını alt dallara ayıralım. Bunun için <li> etiketimizin içerisine girmemiz ve "İslamın Şartları" yazısından sonra bir alt satıra inerek yeni bir <ul> etiketi açmamız gerekiyor. Ardından yeni açtığımız <ul> etiketinin içerisine <li> etiketiyle elemanlarımızı giriyoruz.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>İslamın ve İmanın Şartları</title>
  </head>
  <body>
    <ul>
      <li>İslamın Şartları
        <ul>
          <li>Şehâdet Etmek</li>
          <li>Namaz Kılmak</li>
          <li>Zekât Vermek</li>
          <li>Oruç Tutmak</li>
          <li>Hacca Gitmek</li>
        </ul>
      </li>
      <li>İmanın Şartları</li>
    </ul>
  </body>
</html>

Gördüğünüz gibi ana listemizdeki <li> etiketinin içerisine yeni bir <ul> etiketi açarak iç içe liste oluşturmuş olduk. Bunu bu şekilde devam ettirmek mümkündür.

Şimdi de "İmanın Şartları" elemanının içerisine yeni bir liste oluşturalım.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>İslamın ve İmanın Şartları</title>
  </head>
  <body>
    <ul>
      <li>İslamın Şartları
        <ul>
          <li>Şehâdet Etmek</li>
          <li>Namaz Kılmak</li>
          <li>Zekât Vermek</li>
          <li>Oruç Tutmak</li>
          <li>Hacca Gitmek</li>
        </ul>
      </li>
      <li>İmanın Şartları
        <ul>
          <li>Allah'ın Varlığına ve Birliğine İman</li>
          <li>Allah'ın Kitaplarına İman</li>
          <li>Peygamberlere İman</li>
          <li>Meleklere İman</li>
          <li>Ahiret Gününe İman</li>
          <li>Kadere ve Kazaya İman</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

Gördüğünüz gibi hem İslamın Şartları'nın hem de İmanın Şartları'nın alt listelerini oluşturmuş olduk. Sıralı listelerde de aynı mantık geçerlidir. Fark ettiyseniz type niteliğini kullanmadığımız halde alt listelerimizin sembolü içi boş daire olmuş oldu.

Önceki Ders

Sonraki Ders