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

BACA JUGA ARTIKEL TERKAIT LAINNYA

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