See the world with heart
Latest Post
Generate nested list with CSS only
Posted by jejak on June 22, 2011 in Web Designs , HTML , Frontend Developer , CSS | 15 comments
Masi kerja sama denga iconlab.de bersama Thomas Bode, projekt kali ini sebagai front-end developer untuk website DORISEA. Sebuah website yang membahas permasalahan seputar dinamika umat beragama di Asia Selatan. Dilihat dari sisi desainnya, website ini terlihat cukup simpel dan clean. Sehingga terlihat tidak berpihak ke salah satu agama saja.
Ada sesuatu yang menarik dalam projekt kali ini. Ada yang pernah membuat nested list atau daftar bersarang menggunakan HTML dan CSS? Atau mungkin saya jelaskan dulu apa itu nested list. Singkatnya, daftar bersarang adalah list atau daftar yang memiliki sub daftar (daftar di dalam daftar). Atau bisa anda lihat seperti ini kasusnya:
Itulah yang saya bilang "sesuatu yang menarik" tadi. Ya, suatu daftar bersarang. Heumm rasanya lebih enak menyebutnya dengan nested list ya ;) Tapi sebelumnya saya akan berikan contoh list yang memiliki sub list dengan gaya yang biasanya. Cara paling sederhana untuk membuat list yang memiliki sub list seperti ini jadinya:
Standard nested list:
- Donec nec nunc vel nisl lobortis sollicitudin
-
Vestibulum et arcu neque
- Cras nibh est
-
Fermentum eget
- Cras nibh est
- Fermentum eget
- Tristique ac
- Pellentesque ac urna
-
Vestibulum faucibus fermentum magna consectetur bibendum
- Cras nibh est
-
Fermentum eget
- Cras nibh est
- Fermentum eget
- Duis eget sapien aliquam est rutrum adipiscing
Sekarang saya akan mengajak anda untuk membuat nested list yang lebih kompleks seperti gambar di atas. Kita akan membuat nested list tersebut hanya menggunakan CSS saja, tentunya HTML juga agar muncul di layar browser anda. Dan anda bisa lihat perbedaannya nanti. Langsung saja anda lihat potongan code CSS yang saya buat berikut:
Dimulai dari struktur untuk membuat list tersebut, sederhana saja, kita bisa gunakan order list (ol). Langkah pertama kita reset dulu dengan perintah 'counter-reset' variabel yang akan digunakan dalam proses looping. Lalu pada 'li' pertama kita reset variabel baru yang nantinya akan digunakan untuk sub list. List counter dimulai dari elemen pertama yang memiliki 'couter-reset'. Barulah kita mulai generate nested list dengan meng-counter elemen pertama lalu di-increment untuk setiap kali pengulangan elemen 'li'.
Untuk membuat sublist nya, kita buat code seperti ini:
Bisa kita liat bahwa untuk memulai sub list, kita juga perlu mereset variabel baru yang nantinya digunakan untuk sub list level ketiga. Jadi, variabel-variabel yang saya gunakan berdasarkan urutan lavelnya adalah: ngurut, subngurut, dan subsubngurut. Setelah itu, kita tampilkan sub list dengan perintah 'content'. Diawali dengan angka pertama yang merupakan counter dari elemen sebelumnya, yaitu 'ngurut' kemudian tambahkan titik sebelum counter dari elemen sub list. Setelahnya kita meng-increment variabel 'subngurut' untuk tiap kali looping. Hal yang sama juga kita terapkan untuk level-level selanjutnya. Dalam contoh ini, saya mencoba membuat nested list dengan tiga level. Yap seperti ini hasilnya:
Generated nested list with CSS only:
- Donec nec nunc vel nisl lobortis sollicitudin
-
Vestibulum et arcu neque
- Cras nibh est
-
Fermentum eget
- Cras nibh est
- Fermentum eget
- Tristique ac
- Pellentesque ac urna
-
Vestibulum faucibus fermentum magna consectetur bibendum
- Cras nibh est
-
Fermentum eget
- Cras nibh est
- Fermentum eget
- Duis eget sapien aliquam est rutrum adipiscing
Gimana, nested list yang ini berbeda bukan dengan yang saya contohkan sebelumnya? Namun cara yang saya gunakan ini sepertinya masi ada kelemahan. Di masing-masing level, harus membuat code CSS untuk meng-increment tiap sub list nya sesuai levelnya. Kalo kurang ngerti dengan kata-kata saya, silahkan download sample nya lalu coba. Kalo ada yang bisa membuat secara otomatis rekursifnya, sharing ya.
Oh ya, sekali lagi makasi ya buat mas Nandrito. Uda bantu cara nerangin CSS nyah :D Awalnya saya bingung gimana cara menjelaskan code CSS saya, takut pada ga ngerti. Tapi ga tau deh, masi membingungkan ato enggak ya? Coba aja deh ya biar lebih paham.
15 Responses to Generate nested list with CSS only
Wuiiiiih makin jago ajah mas den nih sekarang.. :D mantaf lah.. ^_^
Cool!, tapi gua notice semestinya <li> didalam <li> langsung tuh gak valid kecuali ada <ul>/<ol> nya, although this does not change the view, cuman urusan standard aja. CMIIW ;-)
Yoii nih tutorialnya,..tapi sayang gw ga ngerti gituuu :(
@andang: wuiiih, nuhun la pa sunan. uda bantu jelasin. @pasuk: wew.. pasuk canggih. tapi bukannya gw buat emang <ol> <li> lalu ada <ol> baru lagi ya pa suk? @tm: makannya share juga sengkrip flash nya, biar gw ga ngerti :D
mantap, kalo ampe dalem bisa manjang donk scriptnya? wiblink wb: itu baru 3. keren breee, banyak dicari nih yang kayak ginih.
sipp,entar gw betapa dulu buat sengkrip yg ga bisa dibaca(ga jalan juga) yee..,dikasi link istilah2 yg ga umumnya dunk deni kalo bisa..
@pasuk: makasi ya pasuuuuk, ternyata gambarnya yang salah. tapi sekarang uda diganti yaaah. makasi makasi makasi ;)
Ga ngerti gan :p
@yoyo: aih yo, suka gitu deh.. merendah aja. oot: gmn, uda melakukan pembalasan sama immam? :D
Nice trick ;) emang mesti di download dulu sample nya biar lebih paham. Thanks for the share yaw. Good work.
FYI, CSS counter hanya ada mulai dari IE versi 8.
@myBIGboss: hahay, betul itu kang ihsan. ohya tengkyu.. udah sampai dengan selamat kirimannya :) tunggu kiriman baliknya yah.
It's rellay great that people are sharing this information.
Your answer was just what I neeedd. It's made my day!
Gee wliliekrs, that's such a great post!