Tentu, mari kita lanjutkan seri tutorialnya ke edisi kesepuluh.

Selamat datang di tutorial CSS kesepuluh! Setelah di edisi sebelumnya kita membahas tentang border, kali ini kita akan fokus pada elemen yang sering digunakan untuk menstrukturkan konten: list atau daftar. HTML menyediakan dua jenis list utama: unordered list (<ul>) untuk daftar tanpa urutan dan ordered list (<ol>) untuk daftar berurutan.

Secara default, tampilan list ini sangat standar—hanya berupa titik (bullet) atau angka. Dengan CSS, kita bisa mengubahnya menjadi lebih menarik dan fungsional, bahkan mengubahnya menjadi komponen UI seperti menu navigasi.

1. Mengubah Tipe Marker (list-style-type)

Properti yang paling umum digunakan untuk list adalah list-style-type. Properti ini memungkinkan kita mengubah penanda (marker) di setiap item list.

Untuk Unordered List (<ul>)

Nilai yang umum digunakan antara lain:

• disc: Titik bulat penuh (default).
• circle: Lingkaran kosong.
• square: Kotak persegi penuh.
• none: Menghilangkan marker sama sekali.

<p>Contoh Unordered List:</p>
<ul class="lingkaran">
  <li>Item pertama</li>
  <li>Item kedua</li>
</ul>

<ul class="kotak">
  <li>Item pertama</li>
  <li>Item kedua</li>
</ul>

ul.lingkaran {
  list-style-type: circle;
}

ul.kotak {
  list-style-type: square;
}

Untuk Ordered List (<ol>)

Anda memiliki lebih banyak pilihan untuk daftar berurutan:

• decimal: Angka desimal (1, 2, 3, …), default.
• decimal-leading-zero: Angka desimal dengan awalan nol (01, 02, 03, …).
• lower-alpha: Alfabet huruf kecil (a, b, c, …).
• upper-alpha: Alfabet huruf kapital (A, B, C, …).
• lower-roman: Angka Romawi kecil (i, ii, iii, …).
• upper-roman: Angka Romawi besar (I, II, III, …).

<p>Contoh Ordered List:</p>
<ol class="romawi">
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ol>

ol.romawi {
  list-style-type: upper-roman; /* Hasil: I, II, III */
}

2. Mengatur Posisi Marker (list-style-position)

Properti ini menentukan apakah marker akan berada di dalam atau di luar kotak konten dari list item.

• outside (default): Marker berada di luar blok teks. Jika teksnya panjang dan melipat ke baris baru, baris baru tersebut akan dimulai sejajar dengan awal teks baris pertama.
• inside: Marker berada di dalam blok teks. Jika teks melipat, baris baru akan dimulai sejajar dengan marker, bukan dengan teks.

<p>Posisi Marker 'outside':</p>
<ul class="posisi-luar">
  <li>Ini adalah contoh item list dengan teks yang cukup panjang untuk melihat bagaimana teks akan melipat ke baris berikutnya.</li>
</ul>

<p>Posisi Marker 'inside':</p>
<ul class="posisi-dalam">
  <li>Ini adalah contoh item list dengan teks yang cukup panjang untuk melihat bagaimana teks akan melipat ke baris berikutnya.</li>
</ul>

ul.posisi-luar {
  list-style-position: outside;
  border: 1px solid #ccc; /* Border untuk memperjelas */
}

ul.posisi-dalam {
  list-style-position: inside;
  border: 1px solid #ccc; /* Border untuk memperjelas */
}

3. Menggunakan Gambar sebagai Marker (list-style-image)

Ingin menggunakan ikon kustom sebagai marker? Anda bisa menggunakan properti list-style-image dengan fungsi url().

ul.custom-marker {
  list-style-image: url('path/ke/gambar/arrow.png');
}

Catatan: Mengontrol ukuran dan posisi gambar marker dengan properti ini bisa sedikit sulit. Untuk kontrol yang lebih presisi, banyak developer lebih memilih untuk menyembunyikan marker default (list-style-type: none;) dan menggunakan properti background-image pada elemen <li> dengan padding-left yang sesuai.

Shorthand Property: list-style

Seperti properti lainnya, CSS menyediakan shorthand untuk menyingkat penulisan ketiga properti di atas. Urutan penulisannya bisa fleksibel, namun umumnya adalah type position image.

ul {
  /* Menggabungkan type, position, dan image */
  list-style: square inside;

  /* Contoh lain jika menggunakan gambar */
  /* Jika gambar gagal dimuat, browser akan menggunakan 'circle' sebagai fallback */
  list-style: circle url('path/ke/gambar.png');
}

Studi Kasus: Membuat Menu Navigasi Horizontal

Salah satu penggunaan paling umum dari styling list adalah untuk membuat menu navigasi. Secara semantik, menu navigasi adalah daftar tautan, jadi sangat cocok menggunakan <ul>.

Langkah 1: HTML Dasar

<nav class="menu-navigasi">
  <ul>
    <li><a href="#">Beranda</a></li>
    <li><a href="#">Produk</a></li>
    <li><a href="#">Tentang Kami</a></li>
    <li><a href="#">Kontak</a></li>
  </ul>
</nav>

Langkah 2: CSS untuk mengubahnya menjadi horizontal

.menu-navigasi ul {
  /* 1. Hilangkan margin & padding default dari browser */
  margin: 0;
  padding: 0;
  
  /* 2. Hilangkan bullet points */
  list-style: none;
  
  /* Tambahan: beri latar belakang untuk navigasi */
  background-color: #333;
  overflow: hidden; /* Trik agar background mencakup float items */
}

.menu-navigasi li {
  /* 3. Buat list item berjejer ke samping */
  float: left;
}

.menu-navigasi li a {
  /* 4. Atur gaya untuk link agar terlihat seperti tombol */
  display: block; /* Membuat seluruh area bisa diklik, bukan hanya teksnya */
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none; /* Hilangkan garis bawah link */
  transition: background-color 0.3s; /* Efek hover halus */
}

/* 5. Tambahkan efek hover */
.menu-navigasi li a:hover {
  background-color: #111;
}

Dengan beberapa baris CSS, kita telah mengubah daftar vertikal sederhana menjadi menu navigasi horizontal yang fungsional dan modern.

Kesimpulan

Menata gaya list adalah keterampilan dasar yang sangat penting. Dengan properti list-style-type, list-style-position, dan list-style-image, Anda dapat menyesuaikan tampilan daftar agar sesuai dengan desain situs Anda. Lebih dari itu, dengan menghilangkan gaya default, Anda bisa mengubah elemen list menjadi fondasi untuk komponen UI yang kompleks seperti menu navigasi, membuktikan betapa fleksibelnya CSS.

Pada tutorial berikutnya, kita akan membahas salah satu konsep paling fundamental dalam layouting CSS: Box Model. Sampai jumpa!