December 27, 2010

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 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 by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)