Pengaturan List menu dengan CSS

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:

  • Menu A
  • Menu B
  • Menu C
<ol>
<li>Menu A </li>
<li>Menu B </li>
<li>Menu C </li>
</ol>

Hasil yang akan ditampilkan di browser:

  1. Menu A
  2. Menu B
  3. 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>
  • Menu 1
  • Menu 2
li {list-style-type: disc;} <ul style="list-style-type:disc">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
  • Menu 1
  • Menu 2
li {list-style-type: circle;} <ul style="list-style-type:circle">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
  • Menu 1
  • Menu 2
li {list-style-type: square;} <ul style="list-style-type:square">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
  • Menu 1
  • Menu 2
li {list-style-type: decimal-leading-zero;} <ul style="list-style-type:decimal-leading-zero">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
  • Menu 1
  • Menu 2
li {list-style-type: decimal;} <ul style="list-style-type:decimal">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
  • Menu 1
  • Menu 2
li {list-style-type: lower-roman;} <ul style="list-style-type:lower-roman">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
  • Menu 1
  • Menu 2
li {list-style-type: upper-roman;} <ul style="list-style-type:none">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
  • Menu 1
  • Menu 2
li {list-style-type: lower-alpha;} <ul style="list-style-type:lower-alpha">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
  • Menu 1
  • Menu 2
li {list-style-type: upper-alpha;} <ul style="list-style-type:none">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
  • Menu 1
  • Menu 2
li {list-style-type: lower-greek;} <ul style="list-style:lower-greek">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
  • Menu 1
  • Menu 2
li {list-style-type: lower-latin;} <ul style="list-style-type:lower-latin">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
  • Menu 1
  • Menu 2
li {list-style-type: upper-latin;} <ul style="list-style-type:upper-latin">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
  • Menu 1
  • Menu 2
li {list-style-type: armenian;} <ul style="list-style-type:armenian">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
  • Menu 1
  • Menu 2
li {list-style-type: georgian;} <ul style="list-style-type:georgian">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
  • Menu 1
  • Menu 2
li {list-style-type: hebrew;} <ul style="list-style:hebrew">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
  • Menu 1
  • Menu 2
li {list-style-type: cjk-ideographic;} <ul style="list-style-type:cjk-ideographic">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
  • Menu 1
  • Menu 2
li {list-style-type: hiragana-iroha;} <ul style="list-style-type:hiragana-iroha">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
  • Menu 1
  • Menu 2
li {list-style-type: katakana;} <ul style="list-style-type:katakana">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
  • Menu 1
  • Menu 2

List style position

li {list-style-position: inside;} <ul style="list-style-position:inside">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
  • Menu 1
  • Menu 2
li {list-style-position: outside;} <ul style="list-style-position:outside">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
  • Menu 1
  • Menu 2

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>
  • Menu 1
  • Menu 2

 

Posted on May 21st, 2008 in Belajar CSS by Masim man

Post a comment

13 Responses to “Pengaturan List menu dengan CSS”

  1. Dji said:

    Trims,tp q blum jg ngrti css,.Sbnarnya pingin…Bgt tau tu css,

  2. Dirnov said:

    Hi,
    Everything dynamic and very positively! 🙂
    Dirnov

  3. dirgita said:

    Asyik, referensi yang aku cari-cari ada di sini^^

  4. angga said:

    thanks, nice info.
    Angga

  5. Ahyar ayank said:

    Tapi gak semua tipe list-style bisa bekerja di semua browser ya? hiragana, katakana dll ada yang gak ditampilin di browser saya (lg ngenet pake hape/Operamini 5)

  6. Pingback: Sinichireina Blog’s

  7. Nyobain mas
    Oh iya cuma mau bilang makasih ilmunya
    kalo bisa tutoril yang menggunakan dreamweaverjuga

  8. Rommy said:

    kalo buat list bar yg horizontal gmn?

  9. Munawir said:

    Ternyata belajar css itu sulit.tak semudah yang di omongkan.

    • Masim man said:

      Ya dalam teorinya memang gampang sulitnya adalah kalo belajar CSS itu kan harus banyak latihan untuk memahami fungsi-fungsi kodenya yang tentunya butuh waktu, kesabaran dan konsentrasi.

  10. Dapet pelajaran banyak ni Boss,makasih ya…
    tempat menimba ngilmu nih…
    salam sukses

  11. Blog Keren said:

    Tulisannya sangat membantu saya karena saya sedang fokus belajar bikin desain web. Terima kasih atas tutorialnya.

Back to top