Cara mengatur list dengan CSS

Pada CSS sendiri Anda bisa mengatur list seperti: mengatur tipe jenis list, mengatur posisi list, men

Apa itu list ?

List adalah salah satu elemen HTML yang digunakan untuk mengelompokkan informasi terkait sehingga menjadi kait mengait satu sama lain dan memudahkan untuk dibaca. Dalam pengembangan web modern, list adalah elemen yang sering digunakan untuk design navigasi.

List bagus dari sudut pandang struktural karena membantu membuat dokumen yang terstruktur dengan baik dan lebih mudah diakses. List juga mempunyai nilai semantik didalamnya.

Informasi: List atau jika diterjemahkan ke bahasa Indonesia yang berarti daftar.

Jenis-jenis list

Didalam HTML terdapat tiga jenis gaya list yang berbeda dan mempunyai nilai makna semantik didalamnya. Berikut tiga jenis list yang bisa Anda pilih:

  • Unordered list (<ul>) – list item ditandai dengan peluru
  • Ordered list (<ol>) – list item ditandai dengan nomor
  • Definition list (<dl>) – list item dengan deskripsi setiap list

Selain tiga jenis list yang tersedia dalam HTML, ada beberapa cara untuk mengatur gaya list ini dengan CSS. Misalnya, kita dapat memilih jenis penanda yang akan digunakan pada list. Penanda bisa berbentuk persegi, bulat, numerik, abjad, atau mungkin tidak ada. 

Bukan hanya itu, Anda juga bisa menentukan apakah list harus ditampilkan secara vertikal atau horizontal. Semua pilihan ini memainkan peran penting dalam design halaman web.

Mengatur style list

Secara default, list dalam ordered list ditandai sebagai nomor ( 1, 2, 3 dll. ), sedangkan list dalam unordered list ditandai sebagai peluru. Namun, dengan properti list-style-type Anda bisa mengatur atau mengganti penanda type listnya.

Kemungkinan nilai untuk properti ini adalah: circle, square, upper-roman, lower-alpha dll.

ul#circle {
    list-style-type: circle;
}
ul#square {
    list-style-type: square;
}
ol#upper-roman {
    list-style-type: upper-roman;
}
ol#lower-alpha {
    list-style-type: lower-alpha;
}

Anda bisa menggunakan properti list-style-type untuk menghapus angka atau peluru bawaan <ol> atau <ul>.

ul#remove {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Perhatikan bahwa list juga memiliki margin dan padding default. Untuk menghapusnya gunakan margin:0 dan padding:0 ke <ul> atau <ol>.

Membuat menu navigasi horizontal

Anda juga bisa membuat menu navigasi secara horizontal hanya dengan memainkan CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #0671ef;
}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: black;
}

Membuat menu navigasi vertikal

Anda juga bisa membuat menu navigasi secara vertikal hanya dengan memainkan CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%;
    overflow: auto;
}
li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}
li a.active {
    background-color: #0671ef;
    color: white;
}
li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

Mengatur posisi list

Anda bisa mengatur posisi list dengan properti list-style-position, dengan properti ini Anda bisa mengatur posisi apakah akan muncul didalam atau diluar kotak blok utama item.

Kemungkinan nilai untuk properti ini adalah: inside atau outside. Secara default posisi list adalah outside.

List-style-position: outside; berarti bahwa poin-poin akan berada diluar item list. Ini adalah default:

  • Item 1
  • Item 2
  • Item 3

List-style-position: inside; berarti bahwa poin-poin akan berada didalam list item. 

  • Item 1
  • Item 2
  • Item 3
ul#outside {
    list-style-position: outside;
}
ul#inside {
    list-style-position: inside;
}
li {
    background-color: lightgrey;
}

Mengatur penanda dengan gambar

Pada contoh diatas Anda bisa mengatur penanda dengan properti list-style-type, Kabar baiknya Anda bisa mengatur penanda menggunakan gambar dengan properti list-style-image.

ul li {
    list-style-image: url(“https://tools.hendky.com/editor/gambar/bendera.png”);
}

Isi url dengan alamat gambar yang akan ditentukan

List shorthand

Dengan list shorthand Anda bisa mempersingkat sebuah kode. Shorthand sendiri yang berarti “steno” atau menulis cepat. Dengan cara ini dimungkinkan juga untuk menentukan semua properti list dalam satu properti tunggal.

Untuk menggunakan list shorthand Anda cukup menggunakan properti list-style. Dengan begitu Anda tidak lagi menulis kode yang panjang.

ul {
    list-style: square inside url(“https://tools.hendky.com/editor/gambar/bendera.png”);
}

Bila menggunakan properti steno, urutan nilai properti adalah:

  • list-style-type 
  • list-style-position 
  • list-style-image 

Jika salah satu dari nilai properti di atas hilang, nilai default untuk properti yang hilang akan dimasukkan, jika ada.

Daftar properti lists

PropertiKegunaanya
list-styleMengatur semua properti list-style dalam satu deklarasi
list-style-imageMenentukan gambar sebagai penanda item list
list-style-positionMenentukan posisi untuk blok list item
list-style-typeMenentukan jenis penanda list item