Pengaturan List menu dengan CSS
Tag elemen untuk membuat List di dalam dokumen HTML adalah: <ul> digunakan untuk list yang tidak berurutan (unordered list) kemudian, <ol> digunakan untuk list yang berurutan kemudian diikuti <li > adalah list menu yang akan ditampilkan (list item).
Untuk lebih jelasnya perhatikan contoh berikut ini:
<ul> <li>Menu A </li> <li>Menu B </li> <li>Menu C </li> </ul>
Hasil yang akan ditampilkan di browser:
<ol> <li>Menu A </li> <li>Menu B </li> <li>Menu C </li> </ol>
Hasil yang akan ditampilkan di browser:
- Menu A
- Menu B
- Menu C
Didalam CSS ada beberapa perintah untuk mengontrol tampilan dari list style, diantaranya adalah:
list-style-type: contoh tipe; adalah untuk mengubah bentuk bullet yang ada di depan dari list menu.
list-style-image: url(contoh.jpg); adalah untuk mengubah bentuk bullet dengan gambar.
list-style-position: posisi; adalah untuk memposisikan list menu: inside dan outside.
Contoh untuk mengubah bullet menjadi berbentuk lingkaran:
<ul style="list-style-type:circle"> <li><a href="#">Menu A </a></li> <li><a href="#">Menu B </a></li> <li><a href="#">Menu C </a></li> </ul>
Contoh untuk mengubah bullet menjadi berbentuk kotak:
<ul style="list-style-type:square"> <li><a href="#">Menu A </a></li> <li><a href="#">Menu B </a></li> <li><a href="#">Menu C </a></li> </ul>
Jika menggunakan CSS tersendiri anda bisa menuliskan seperti berikut:
li { list-style-type: square; }
Namun ini adalah penulisan pengaturan secara global, dimana setiap yang ada diantara tag elemen "li" didalam dokumen akan mengikuti pengaturan diatas, jadi jika ingin membuat pengaturan yang lebih spesifik anda bisa menggunakan id (#) atau class (.), contoh:
<ul id="menu"> <li><a href="#">Menu A </a></li> <li><a href="#">Menu B </a></li> <li><a href="#">Menu C </a></li> </ul>
Jadi di dalam file CSS anda bisa menuliskan:
#menu li { list-style-type: square; }
Berikut adalah tabel dari list style kode disertai dengan contohnya masing-masing, sebagian mungkin tidak akan ditambilkan di browser, karena ini tergantung dari language atau simbol yang disupport oleh browser maupun system yang kita gunakan:
Kode didalam CSS
|
Kode di dalam HTML
|
Tampilan di browser
|
|---|
| |
List style type
|
| li {list-style-type: none;} | <ul style="list-style-type:none">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
| li {list-style-type: disc;} | <ul style="list-style-type:disc">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
| li {list-style-type: circle;} | <ul style="list-style-type:circle">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
| li {list-style-type: square;} | <ul style="list-style-type:square">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
| li {list-style-type: decimal-leading-zero;} | <ul style="list-style-type:decimal-leading-zero">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
| li {list-style-type: decimal;} | <ul style="list-style-type:decimal">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
| li {list-style-type: lower-roman;} | <ul style="list-style-type:lower-roman">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
| li {list-style-type: upper-roman;} | <ul style="list-style-type:none">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
| li {list-style-type: lower-alpha;} | <ul style="list-style-type:lower-alpha">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
| li {list-style-type: upper-alpha;} | <ul style="list-style-type:none">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
| li {list-style-type: lower-greek;} | <ul style="list-style:lower-greek">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
| li {list-style-type: lower-latin;} | <ul style="list-style-type:lower-latin">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
| li {list-style-type: upper-latin;} | <ul style="list-style-type:upper-latin">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
| li {list-style-type: armenian;} | <ul style="list-style-type:armenian">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
| li {list-style-type: georgian;} | <ul style="list-style-type:georgian">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
| li {list-style-type: hebrew;} | <ul style="list-style:hebrew">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
| li {list-style-type: cjk-ideographic;} | <ul style="list-style-type:cjk-ideographic">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
| li {list-style-type: hiragana-iroha;} | <ul style="list-style-type:hiragana-iroha">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
| li {list-style-type: katakana;} | <ul style="list-style-type:katakana">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
List style position
|
| li {list-style-position: inside;} | <ul style="list-style-position:inside">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
| li {list-style-position: outside;} | <ul style="list-style-position:outside">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
List style image
|
| li {list-style-image: url(contoh.jpg);} | <ul style="list-style-image: url(contoh.jpg">
<li>Menu 1</li>
<li>Menu 2</li>
</ul> |
|
