Memanfaatkan Unordered List untuk membuat menu horizontal, vertikal dan sitemap ~ eztech21

Anda tentu tidak asing lagi dengan tag HTML <ul> dan <ol>. Ya kedua tag ini digunakan untuk membuat list / urutan. Dan dengan bantuan CSS kita dapat membuat tag <ul> yang kita anggap remeh ini menjadi sesuatu yang wajib kita pakai dalam membuat website

Unordered List

Oke, mari kita ingat terlebih dahulu mengenai list, jika anda memiliki kode seperti ini:

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <i>List 3</li>
</ul>

Maka hasilnya akan seperti ini:

List 1
List 2
List 3

Oke anda sudah ingat?, sekarang apa saja yang bisa kita lakukan dengan list yang membosankan seperti itu? Banyak, dengan bantuan CSS kita bisa memanfaatkan list untuk membuat website kita menjadi lebih menarik.

Yang perlu kita ingat bahwa unordered list selalu terdiri dari 2 tag, yaitu tag <ul> dan <li>. Oke sekarang anda coba berikut ini dan simpan dengan nama menu.html:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Artikel</a></li>
  <li><a href="#">Kategori</a></li>
  <li><a href="#">Belajar List</a></li>
</ul>

Maka hasilnya seperti ini:

Home
Artikel
Kategori
Belajar List

Kita akan menggunakan menu.html untuk semua contoh dari awal sampai akhir dari artikel ini. Anda hanya perlu mengganti kode CSS dengan contoh yang diberikan. Saya yakin anda sudah tau bagaimana memasang CSS pada HTML.

Membuat kotak mengelilingi menu

Pertama-tama kita akan coba membuat kotak yang mengelilingi menu kita. Karena kotak berada dibagian terluar dari menu, maka kita perlu mengubah CSS untuk tag <ul>. Cobalah kode CSS berikut ini:

ul { 
 border: 1px solid #000;
 margin: 5px;
 width: 160px;
 padding: 5px;
}

Hasilnya seperti ini

Silahkan anda buka contoh diatas menggunakan IE 6 dan Firefox, maka anda akan melihat perbedaan. Ya pengaturan CSS untuk IE6 dan Firefox berbeda. Karena itu pastikan anda selalu mengeceknya dikedua browser tersebut untuk memastikan hasilnya sama.

Jika anda lihat pada contoh diatas, menu nya telah dikelilingi oleh kotak dengan garis berwarna hitam. Nah pada Firefox bullet nya masih terlihat dan pada IE 6 tidak terlihat. Untuk itu kita perlu menggeser paddingnya kekanan agar terlihat sama dikedua browser tersebut. Sekarang ubahlah kode CSS nya menjadi:

ul { 
 border: 1px solid #000;
 margin: 5px;
 width: 160px;
 padding: 5px 5px 5px 25px;
}

Maka hasilnya akan seperti ini.

Oke, sekarang tampilannya telah sama. Berikutnya kita akan coba mengganti bullet (yang bentuknya lingkaran dan terlihat membosankan) dengan images. Silahkan simpan contoh images untuk bullet ini

untuk digunakan pada contoh berikut ini. Sekarang cobalah CSS berikut ini:

ul { 
 border: 1px solid #000;
 margin: 5px;
 width: 160px;
 padding: 5px 5px 5px 25px;
 list-style-image: url(bullet.gif);
}

Maka hasilnya akan seperti ini.

Tetapi jika anda tidak suka menggunakan images, anda dapat menggantinya dengan panah atau istilah kerennya "right double angle quote". Kode Hexa untuk membuat panah adalah », dan karena kita menggunakan CSS maka kita tidak bisa menggunakan Hexa, kita harus menggunakan kode ASCII. Anda tidak perlu repot mencari kode ASCII untuk » / » saya akan memberitahukannya yaitu 00BB dan 0020 untuk spasi.

Kita akan menggunakan CSS2 :before pseudo-element, yang sayang sekali tidak disupport oleh IE 6 kebawah. Oke sekarang ganti kode CSS nya menjadi seperti ini:

ul { 
 border: 1px solid #000;
 margin: 5px;
 width: 160px;
 padding: 5px 5px 5px 25px;
 list-style: none;
} 
li:before {
 content: "\00BB \0020";
}

Inilah hasilnya

Vertical Menu

Untuk membuat menu yang menarik kita perlu kreatif dalam membuat CSS untuk tag <li> dan <a>. Silahkan anda coba kode CSS berikut ini:

ul { 
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;
list-style: none;
} 
li a{
 display:block;
 color:#ff8d1b;
 text-decoration:none;
 border-bottom:1px dashed #ff7f00;
 padding:2px 2px 2px 5px;
 font-family:Georgia, garamond, serif;
}
li a:hover{
 display:block;
 color:#db6d00;
 text-decoration:none;
 border-bottom:1px dashed #ff7f00;
 background:#ffdfbf;
}

Inilah hasilnya

Jika anda perhatikan tidak banyak perbedaan dari kode CSS sebelumnya. Hanya saja kita memberikan kode CSS untuk tag <a>. Yang terpenting disini kita memberikan warna background yang berbeda untuk li a dengan li a:hover. Jangan lupa menambahkan display:block; agar perubahan efek hover bisa terjadi ketika mouse berada didalam kotak bagian li, tidak perlu harus mengenai teksnya.

Untuk IE 6 akan selalu memunculkan jarak pada <li>, untuk menghilangkan hal tersebut kita perlu mendempetkan kode HTML untuk <li>. Jika kode HTML kita sebelumnya seperti ini:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">Kategori</a></li>
<li><a href="#">Belajar List</a></li>
</ul>
Maka kita perlu mengubahnya menjadi:
<ul>
<li><a href="#">Home</a></li> <li><a href="#">Artikel</a></li> <li><a href="#">Kategori</a></li> <li><a href="#">Belajar List</a></li>
</ul>

Horizontal Menu

Kita pun dapat membuat menu horizontal dengan mudah. Coba anda buat kode CSSnya seperti ini:

ul { 
margin: 0;
padding:0;
list-style: none;
} 
li {
 display:inline;
}
li a{
 float:left;
 color:#ff8d1b;
 text-decoration:none;
 border-right:1px solid #ff7f00;
 border-bottom:1px solid #fff;
 border-top:1px solid #fff;
 padding:2px 10px 2px 10px;
 font-family:Georgia, garamond, serif;
}
li a:hover{
 float:left;
 color:#db6d00;
 text-decoration:none;
 border-bottom:1px solid #ff7f00;
 border-top:1px solid #ff7f00;
 background:#ffdfbf;
}

Dan hasilnya seperti ini

Dalam menggunakan prinsip-prinsip Web Standart, pembuatan menu untuk layout wajib menggunakan Unordered List seperti contoh-contoh diatas.

Oke, jadi yang perlu diingat disini adalah untuk menambahkan float:left; pada tag <a>. float:left; berguna untuk membuat menunya menjadi menyamping (Horizontal). Karena kita membuat menu menyamping kita tidak perlu mengatur width untuk <ul>. Dan seperti biasa di IE 6 tampilannya tidak pas horizontal, karena itu perlu diperbaiki dengan memberikan display:inline pada tag <li>

Sitemap

Sitemap berguna agar pengunjung mengetahui dimana ia berada sekarang. Dan tentu saja dapat memudahkan search engine untuk menemukan halaman website anda yang lain. Jika anda ingin melihat contoh sitemap anda silahkan anda lihat diatas dibawah tulisan "Artikel CSS", itulah yang akan kita buat sekarang. Sekarang kita coba buat file sitemap.html dan isilah dengan kode berikut ini:

<style type="text/css" media="all">
ul {
 margin-left: 0;
 padding-left: 0;
 display: inline;
 border: none;
 } 
ul li {
 margin-left: 0;
 padding-left: 2px;
 border: none;
 list-style: none;
 display: inline;
 }
</style>
<ul>
 <li><a href="#">Home</a>
 <ul>
  <li>» <a href="#">Artikel</a>
  <ul>
   <li>» <a href="#">CSS</a>
   <ul>
    <li>» Membuat Menu</li>
   </ul></li>
  </ul></li>
 </ul></li>
</ul>

Dan hasilnya seperti ini.

Prinsipnya sama saja dengan membuat horizontal menu, tapi disini kita memasukkan tag <ul> didalam tag <ul>. Jadi kita membuat Unordered List bertingkat. Bagaimana? gampang kan? selamat mencoba...

Posted in: CSS (Cascading Stylesheet)