Cara mengatur CSS list menu

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Cara mengatur CSS list menu dan semoga artikel ini bermanfaat.


Belajar Komputer melalui internet kali ini yaitu cara mengatur CSS list menu.
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>
  • Menu A
  • Menu B
  • Menu C 
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>
  • Menu A
  • Menu B
  • Menu C 
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; } 

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Cara mengatur CSS list menu kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered
feedburner

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 12:00

0 komentar:

Poskan Komentar

Silahkan Tinggalkan jejak sobat, bila mau menggunakan emotion silahkan klik emotionnya kemudian copy dengan ctrl+c dan paste kodenya didalam kotak komentar...

close
GUESTBOOK
Google PageRank Checker Powered by  MyPagerank.Net
backlink
Dashboard
| Copyright © 2012 |
| Belajar Komputer Melalui Internet |
| Desain by: Abdul Kohar | Powered by: Blogger |