{"id":15209,"date":"2018-03-29T21:56:35","date_gmt":"2018-03-29T14:56:35","guid":{"rendered":"https:\/\/www.pugam.com\/?p=15209"},"modified":"2018-03-31T14:03:34","modified_gmt":"2018-03-31T07:03:34","slug":"cara-membuat-nested-list-dengan-css-counters","status":"publish","type":"post","link":"https:\/\/www.pugam.com\/15209\/cara-membuat-nested-list-dengan-css-counters\/","title":{"rendered":"Cara Membuat Nested List dengan CSS Counters"},"content":{"rendered":"

\"Cara<\/p>\n

Pada postingan sebelumnya, saya sudah menjelaskan apa itu CSS Counters dan bagaimana cara menggunakannya<\/a> untuk membuat daftar terurut.<\/p>\n

Kali ini, saya akan menjelaskan bagaimana cara membuat nested list dengan CSS Counter.<\/p>\n

Pertama, apa itu nested list?<\/p>\n

Dalam bahasa Inggris, nested<\/em> memiliki arti “bersarang”. Jadi, kita akan membuat daftar bersarang \ud83d\ude00 , aneh juga sepertinya kalau saya sebut daftar bersarang meskipun sebetulnya tidak ada yang salah dengan istilah itu.<\/p>\n

Tapi agar lebih bisa dipahami, nested list adalah sebuah daftar dengan beberapa level kedalaman. Contohnya seperti yang ada pada gambar di atas. Atau contoh lainnya seperti ini:<\/p>\n

\"Nested<\/p>\n

HTML memiliki tag khusus untuk membuat daftar seperti yang terlihat pada gambar tapi sesuai judul, di sini kita tidak akan memanfaatkan tag HTML, melainkan CSS.<\/p>\n

Struktur HTML<\/h2>\n

Pertama, kita buat dulu struktur HTML nya. Jika Anda ingin menerapkan cara ini di WordPress atau Blogspot, tinggal pahami struktur HTML di theme yang Anda gunakan lalu terapkan cara yang sama.<\/p>\n

<body>\r\n  <div id=\"content\">\r\n    <div class=nested-numeric>\r\n      <h2>Item<\/h2>\r\n        <h3>sub-item<\/h3>\r\n          <h4>sub-sub-item<\/h4>\r\n          <h4>sub-sub-item<\/h4>\r\n        <h3>sub-item<\/h3>\r\n          <h4>sub-sub-item<\/h4>\r\n          <h4>sub-sub-item<\/h4>\r\n      <h2>Item<\/h2>\r\n        <h3>sub-item<\/h3>\r\n          <h4>sub-sub-item<\/h4>\r\n          <h4>sub-sub-item<\/h4>\r\n        <h3>sub-item<\/h3>\r\n          <h4>sub-sub-item<\/h4>\r\n          <h4>sub-sub-item<\/h4>\r\n      <h2>Item<\/h2>\r\n        <h3>sub-item<\/h3>\r\n          <h4>sub-sub-item<\/h4>\r\n          <h4>sub-sub-item<\/h4>\r\n        <h3>sub-item<\/h3>\r\n          <h4>sub-sub-item<\/h4>\r\n          <h4>sub-sub-item<\/h4>\r\n    <\/div>\r\n    <div class=nested-roman>\r\n      <h2>Item<\/h2>\r\n        <h3>sub-item<\/h3>\r\n          <h4>sub-sub-item<\/h4>\r\n          <h4>sub-sub-item<\/h4>\r\n        <h3>sub-item<\/h3>\r\n          <h4>sub-sub-item<\/h4>\r\n          <h4>sub-sub-item<\/h4>\r\n      <h2>Item<\/h2>\r\n        <h3>sub-item<\/h3>\r\n          <h4>sub-sub-item<\/h4>\r\n          <h4>sub-sub-item<\/h4>\r\n        <h3>sub-item<\/h3>\r\n          <h4>sub-sub-item<\/h4>\r\n          <h4>sub-sub-item<\/h4>\r\n      <h2>Item<\/h2>\r\n        <h3>sub-item<\/h3>\r\n          <h4>sub-sub-item<\/h4>\r\n          <h4>sub-sub-item<\/h4>\r\n        <h3>sub-item<\/h3>\r\n          <h4>sub-sub-item<\/h4>\r\n          <h4>sub-sub-item<\/h4>\r\n    <\/div>\r\n  <\/div>\r\n<\/body><\/pre>\n
Perhatikan, di sini saya menggunakan tag <h2><\/code>, <h3><\/code>, dan <h4><\/code>, kenapa? Karena kasus yang sering saya temui, CSS counters digunakan untuk memberikan penomoran berurut pada tag heading<\/em> dalam sebuah halaman.<\/p>\n
Bagaimana jika ingin digunakan untuk membuat daftar biasa? Ya tetap bisa, Anda tinggal mengganti tag heading<\/em> dengan tag HTML <li><\/code>.<\/p>\n
Ada dua blok elemen dalam contoh karena memang saya ingin menunjukkan penerapan gaya penomoran yang berbeda pada setiap blok.<\/p>\n
CSS<\/h2>\n
Berikut kode CSS nya:<\/p>\n
#content {\r\n  display: block;\r\n  width: 700px;\r\n  height: 100%;\r\n  margin: 0 auto;\r\n}\r\n\r\n\/*Ini untuk blok elemen pertama dengan gaya penomoron numerik*\/\r\n.nested-numeric {\r\n  display: inline-block;\r\n  width: 50%;\r\n  float: left;\r\n  counter-reset: h2-num;\r\n}\r\n\r\n.nested-numeric h2 {\r\n  counter-increment: h2-num;\r\n  counter-reset: h3-num;\r\n}\r\n\r\n.nested-numeric h2:before {\r\n  content: counter(h2-num)'.';\r\n  color: red;\r\n  margin: 0 5px 0 0;\r\n}\r\n\r\n.nested-numeric h3 {\r\n  counter-increment: h3-num;\r\n  counter-reset: h4-num;\r\n}\r\n\r\n.nested-numeric h3:before {\r\n  content: counter(h2-num)'.'counter(h3-num);\r\n  color: red;\r\n  margin: 0 5px 0 20px;\r\n}\r\n\r\n.nested-numeric h4 {\r\n  counter-increment: h4-num;\r\n}\r\n\r\n.nested-numeric h4:before {\r\n  content: counter(h2-num)'.'counter(h3-num)'.'counter(h4-num);\r\n  color: red;\r\n  margin: 0 5px 0 40px;\r\n}\r\n\r\n\/*Ini untuk blok elemen kedua dengan gaya penomoron romawi*\/\r\n.nested-roman {\r\n  display: inline-block;\r\n  width: 50%;\r\n  float: right;\r\n  counter-reset: h2-rom;\r\n}\r\n\r\n.nested-roman h2 {\r\n  counter-increment: h2-rom;\r\n  counter-reset: h3-rom;\r\n}\r\n\r\n.nested-roman h2:before {\r\n  content: counter(h2-rom,upper-roman)'.';\r\n  color: blue;\r\n  margin: 0 5px 0 0;\r\n}\r\n\r\n.nested-roman h3 {\r\n  counter-increment: h3-rom;\r\n  counter-reset: h4-rom;\r\n}\r\n\r\n.nested-roman h3:before {\r\n  content: counter(h2-rom,upper-roman)'.'counter(h3-rom,upper-roman);\r\n  color: blue;\r\n  margin: 0 5px 0 20px;\r\n}\r\n\r\n.nested-roman h4 {\r\n  counter-increment: h4-rom;\r\n}\r\n\r\n.nested-roman h4:before {\r\n  content: counter(h2-rom,upper-roman)'.'counter(h3-rom,upper-roman)'.'counter(h4-rom,upper-roman);\r\n  color: blue;\r\n  margin: 0 5px 0 40px;\r\n}<\/pre>\n
Saya menggunakan dua gaya penomoran, numerik yang secara default akan dipilih ketika kita tidak menyertakan attribute gaya penomoran. Kedua adalah gaya roman (angka romawi) dengan menyertakan attribute upper-roman<\/code> pada properti content<\/code>.<\/p>\n
Hasilnya seperti ini:<\/p>\n
See the Pen on CodePen<\/a>.<\/p>