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.
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
Properti | Kegunaanya |
---|---|
list-style | Mengatur semua properti list-style dalam satu deklarasi |
list-style-image | Menentukan gambar sebagai penanda item list |
list-style-position | Menentukan posisi untuk blok list item |
list-style-type | Menentukan jenis penanda list item |