Pada dasarnya, hampir semua menu menggunakan struktur
HTML list,
dalam hal ini adalah unordered list (tag ul) atau daftar tak berurutan
yang merangkum keseluruhan list (tag li). Segala bentuk navigasi yang
berupa menu menggunakan struktur dari tag-tag tersebut dan kemudian
ditambahi dengan aturan-aturan yang membentuk tampilan, fungsi, serta
efek yang menarik (CSS dan Javascript).
Unordered
list digunakan untuk membentuk susunan list/daftar yang tidak disusun
berdasarkan urutan angka. Sedangkan untuk struktur list yang berurutan
(ordered list <ol>) disusun berdasarkan urutan angka; dari 1, 2,
3, dan seterusnya. Tentang ini, akan saya bahas pada kesempatan posting
selanjutnya.
Dengan sedikit styling, list tersebut akan muncul dengan diawali titik,
gambar, ataupun simbol lain sesuai dengan aturan list styling yang
dibawa oleh template. Secara advanced, dengan ditambahi styling,
fungsi, dan efek, list akan menjadi menu horizontal, vertical, atau
menu-menu lain yang sangat menarik dan eye-catching.
Struktur dasar dari
unordered list
diawali dengan tag <ul> dan ditutup dengan closing tag
<ul>. Di dalamnya terdapat susunan list-list yang masing-masing
berada dalam tag <li> dan </li>.
<ul>
<li>text/item disini</li>
<li>text/item disini</li>
<li>text/item disini</li>
<li>text/item disini</li>
<li>text/item disini</li>
</ul>
Tanpa aturan luas dan tinggi, baik dengan HTML maupun CSS, tampilan list akan muncul dalam urutan per baris:
- text/item disini
- text/item disini
- text/item disini
- text/item disini
- text/item disini
Ide penggunaan list
sederhana ini akan mempermudah dalam membuat list secara manual, baik
untuk kepentingan membuat list di dalam posting maupun membuat menu yang
akan ditampilkan di sidebar. Hampir seluruh
navigasi menu di bagian sidebar blog ini saya buat dengan menu list manual.
Mengapa? Ada beberapa alasan kuat mengapa saya
membuat menu list secara manual:
- Kostumisasi
isi lebih mudah daripada harus menggunakan widget khusus, misalnya
label. Kita dapat dengan mudah melakukan perubahan tanpa harus mengedit
Template HTML. Misalnya ketika harus mengubah anchor text,
mengaplikasikan atribut (misalnya atribut nofollow) pada label, dan
bebas melakukan CSS styling.
- Tahukah bahwa sebagian besar widget yang memuat automatic generated list
seperti popular post, recent post, dan widget-widget navigasi lain yang
kebanyakan menggunakan feed links atau redirect links? Link-link
semacam itu tidak di-indeks oleh search engine, sebagaimana yang telah
dijelaskan Google dalam Panduan dan Kriteria Google Quality Content. Untuk memperkuat page structure, sebaiknya perbanyak link list yang langsung mengarah ke link/halaman yang dituju.
- Dapat dengan sesuka hati mengatur isi menu, tanpa hasil generating
dari widget yang kadang tidak sesuai dengan keinginan. Misalnya, untuk
popular post, anda dapat dengan mudah memanipulasi isinya untuk
memaksimalkan posting yag jarang terjamah pengunjung. :P
- Dapat membuat list non menu (yang bukan digunakan sebagai navigasi)
dengan mudah di bagian sidebar. Misalnya untuk membuat list tertentu
yang berfungsi sebagai informasi (anda dapat melihat contohnya di bagian
sidebar kanan bawah, tepatnya di bawah logo copyscape ^_^).
Untuk membuat list menu yang berisi link, cukup tambahkan tag a beserta anchor text-nya di dalam tag li:
<ul>
<li><a href="#">anchor text</a></li>
<li><a href="#">anchor text</a></li>
<li><a href="#">anchor text</a></li>
<li><a href="#">anchor text</a></li>
<li><a href="#">anchor text</a></li>
</ul>
Contoh hasilnya:
Anda dapat dengan
mudah membuatnya di sidebar sebagai pengganti widget menu yang isinya
dapat diatur secara manual, sehingga dapat di-handle secara penuh. Untuk
membuat list menu semacam ini di sidebar, masuk ke Dashboard >
Design/Rancangan > klik add a gadget/tambah gadget > pilih
HTML/Javascript. Beri judul sesuai isi menu dan susun list sesuai
keinginan. Tampilan list menu akan mengikuti aturan yang telah dibawa
oleh template blog (inherited).
Itulah dasar dari unordered HTML
list dan menu list. Selanjutnya ke depan saya akan presentasikan
beberapa konsep lain dari berbagai macam elemen dan struktur list
web/blog beserta styling-nya dan juga akan ada beberapa menu horizontal
dan vertical yang akan saya persembahkan (Insya Allah).
