Membuat Nested List (Daftar Bersarang) dengan CSS

Ketika membuat suatu list/daftar secara sederhana mungkin tidak akan menjumpai masalah dalam pembuatannya. Contohnya seperti ini:

  1. List Number – 1
  2. List Number – 2
  3. List Number – 3

Bagaimana dengan membuat daftar yang lebih rinci, yaitu dengan menambahkan sub-list ke dalamnya?

Nested List
Daftar yang terperinci seperti di atas sering disebut dengan Nested List atau Daftar Bersarang. Dalam tutorial ini saya akan mencoba menjelaskan bagaimana cara membuat nested list dengan menggunakan HTML dan CSS saja.

Langkah 1: Membuat Markup HTML

<ol>
  <li>Item 1</li>         		<!-- 1     -->
  <li>Item 2              		<!-- 2     -->
    <ol>
      <li>Sub Item 1</li>      		<!-- 2.1   -->
      <li>Sub Item 2</li>      		<!-- 2.2   -->
      <li>Sub Item 3           		<!-- 2.3   -->
        <ol>
          <li>Sub-sub Item 1</li>  	<!-- 2.3.1 -->
          <li>Sub-sub Item 2</li>  	<!-- 2.3.2 -->
          <li>Sub-sub Item 3</li>  	<!-- 2.3.3 -->
          <li>Sub-sub Item 4</li>  	<!-- 2.3.4 -->
        </ol>
      </li>
      <li>Sub Item 4</li>      		<!-- 2.4   -->
    </ol>
  </li>
  <li>Item 3</li>          		<!-- 3     -->
  <li>Item 4</li>          		<!-- 4     -->
</ol>

Dengan menambahkan ol {list-style: decimal;}pada CSSnya, maka hasilnya akan seperti ini:

Nested List Default
Nomor sub-list belum sesuai

Nested list di atas masih defaultdan belum bisa menampilkan nomor yang sesuai dengan sub-listnya, seperti 2.1 atau 2.3.1.

Langkah 2: Gunakan “CSS Counters” pada CSS

Untuk bisa memunculkan nomor yang sesuai dengan sub-list, maka kita mengaturnya dengan menggunakan CSS Counters. Value yang dipakai untuk menggunakan CSS Counters ini adalah counter-reset dan counter-increment.

Untuk counter-reset kita sisipkan pada bagian ol (ordered list) yang bertujuan untuk melakukan reset value menjadi 0. Artinya setiap ada element ol, maka penomoran yang akan dimunculkan oleh li (list) akan dimulai dari 1. Begitu seterusnya.

Kemudian untuk counter-increment disisipkan ke dalam li (tepatnya pada li:before) sehingga ketika terjadi looping list akan dilakukan increment/penambahan +1 pada setiap nomor list.

Dan untuk mengeksekusi CSS Counters (counter-reset dan counter-increment) digunakan fungsi counters() yang dimasukkan dalam content property pada pseudo-elements. Untuk lebih jelasnya bisa lihat kode CSS berikut:

ol {
	list-style: none;
	counter-reset: nested;
}
li {
	display: block;
	padding: 2px 0;
}
li:before {
	content: counters(nested, ".", decimal) ". ";
	counter-increment: nested;
	padding-right: 5px;
}

Maka hasilnya sudah berubah menjadi:

Nested List Beta
Nomor sub-list sudah sesuai

Langkah 3: Merapikan Susunan Nested List

Jika kita lihat gambar di atas, maka susunan nested list belum tersusun rapi. Yang diinginkan adalah membuat setiap sub-list lebih menjorok ke dalam. Caranya dengan menambahkan style berikut:

ol li ol li {
	margin-left: 21px;
}
ol li ol li ol li {
	margin-left: 32px;
}

Dan hasil akhirnya:

Nested List Final
Nested List Final

Selamat mencoba, dan Mari Belajar, Mari Berbagi Ilmu.

Demo

Download

4 thoughts on “Membuat Nested List (Daftar Bersarang) dengan CSS

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s