Tentu, ini artikelnya.

Daftar atau list (<ul>, <ol>) adalah elemen fundamental dalam HTML untuk menyajikan informasi secara terstruktur. Namun, tampilan standarnya yang berupa bulatan atau angka seringkali terlihat membosankan dan tidak cocok dengan desain web modern. Kabar baiknya, dengan CSS, Anda memiliki kendali penuh untuk mengubah tampilan daftar ini menjadi lebih menarik dan fungsional.

Mari kita pelajari cara mengubah dan menata daftar atau list menggunakan CSS, dari yang paling dasar hingga membuat menu navigasi.

## Mengubah Penanda Bawaan (Markers)

Properti CSS utama untuk menata penanda daftar adalah list-style-type. Properti ini memungkinkan Anda mengubah bentuk penanda untuk daftar tidak berurutan (<ul>) dan daftar berurutan (<ol>).

### Daftar Tidak Berurutan (<ul>)

Anda bisa mengubah bulatan standar menjadi bentuk lain seperti kotak atau lingkaran kosong.

CSS:

/* Mengubah bulatan menjadi kotak */
ul.kotak {
  list-style-type: square;
}

/* Mengubah bulatan menjadi lingkaran kosong */
ul.lingkaran {
  list-style-type: circle;
}

/* Menghilangkan penanda sama sekali */
ul.tanpa-penanda {
  list-style-type: none;
}

### Daftar Berurutan (<ol>)

Anda juga bisa mengubah format penomoran, misalnya menggunakan angka romawi atau huruf.

CSS:

/* Menggunakan huruf kapital */
ol.huruf-kapital {
  list-style-type: upper-alpha;
}

/* Menggunakan angka romawi kecil */
ol.romawi-kecil {
  list-style-type: lower-roman;
}

## Menghilangkan Penanda dan Padding

Salah satu penggunaan paling umum adalah menghilangkan penanda dan padding bawaan, terutama saat membuat menu navigasi. Secara default, browser menambahkan padding-left pada elemen <ul> atau <ol>.

CSS:

ul.menu {
  list-style-type: none; /* Menghilangkan penanda/bullet */
  margin: 0;             /* Menghilangkan margin bawaan */
  padding: 0;            /* Menghilangkan padding bawaan */
}

Dengan kode ini, daftar Anda akan kehilangan tampilan standarnya dan setiap item <li> akan rata kiri, siap untuk ditata lebih lanjut.

## Menggunakan Gambar Sebagai Penanda

Ingin penanda yang lebih unik? Anda bisa menggunakan gambar kustom sebagai penanda dengan properti list-style-image.

CSS:

ul.kustom {
  list-style-image: url('path/ke/gambar-anda.png');
}

Cukup ganti 'path/ke/gambar-anda.png' dengan lokasi gambar ikon kecil yang ingin Anda gunakan.

## Penataan Tingkat Lanjut dengan Pseudo-elemen ::before

Untuk kontrol penuh atas penanda, metode modern dan paling fleksibel adalah dengan menggunakan pseudo-elemen ::before. Pertama, kita sembunyikan penanda asli, lalu kita buat penanda kustom kita sendiri.

Metode ini memungkinkan Anda menata warna, ukuran, dan bahkan menggunakan ikon dari library seperti Font Awesome.

CSS:

ul.modern {
  list-style-type: none; /* 1. Sembunyikan penanda asli */
  padding-left: 0;
}

ul.modern li {
  padding-left: 20px; /* 2. Beri ruang untuk penanda kustom */
  position: relative;
}

ul.modern li::before {
  content: '✓'; /* 3. Isi penanda kustom (bisa berupa teks, emoji, atau unicode) */
  color: #28a745; /* 4. Beri warna */
  font-weight: bold;
  position: absolute; /* 5. Posisikan secara presisi */
  left: 0;
  top: 0;
}

Dengan teknik ini, Anda bisa menempatkan hampir semua hal sebagai penanda daftar Anda!

## Studi Kasus: Membuat Menu Navigasi Horizontal

Salah satu aplikasi paling praktis dari penataan daftar adalah membuat menu navigasi. Daftar HTML (<ul> dan <li>) adalah struktur semantik yang sempurna untuk menu.

HTML:

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

CSS:

/* 1. Reset daftar */
.menu-horizontal {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  overflow: hidden; /* Mencegah masalah layout */
}

/* 2. Buat item daftar menjadi horizontal */
.menu-horizontal li {
  float: left; /* Membuat item berbaris ke kiri */
  /* Alternatif modern: display: inline-block; */
}

/* 3. Atur tautan di dalam menu */
.menu-horizontal li a {
  display: block; /* Membuat seluruh area bisa diklik */
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none; /* Menghilangkan garis bawah */
  transition: background-color 0.3s;
}

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

Dengan beberapa aturan CSS di atas, Anda telah mengubah daftar HTML standar menjadi menu navigasi horizontal yang fungsional dan responsif.