Memanfaatkan Unordered List untuk membuat menu horizontal, vertikal dan sitemap

Anda tentu tidak asing lagi dengan tag HTML dan

. Ya kedua tag ini digunakan untuk membuat list / urutan. Dan dengan bantuan CSS kita dapat membuat tag
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:


List 1

List 2
  List 3

 

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

dan
• . Oke sekarang anda coba berikut ini dan simpan dengan nama menu.html:
  

  
  
  
  
   href="#">Home
  
   href="#">Artikel
  
   href="#">Kategori
  
   href="#">Belajar List
  
  
  
  

  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. Jika belum mengerti, silahkan baca artikel dasar-dasar CSS.
  

  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
  
  . Cobalah kode CSS berikut ini:
  

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

  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;
  }

  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);
  }

  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";
  }

  Vertical Menu

  Untuk membuat menu yang menarik kita perlu kreatif dalam membuat CSS untuk tag
  

  
  

  dan . 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;
  }

  Jika anda perhatikan tidak banyak perbedaan dari kode CSS sebelumnya. Hanya saja kita memberikan kode CSS untuk tag . 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.
   

  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;
  }

  Oke, jadi yang perlu diingat disini adalah untuk menambahkan float:left; pada tag . float:left; berguna untuk membuat menunya menjadi menyamping (Horizontal). Karena kita membuat menu menyamping kita tidak perlu mengatur width untuk
  

  . Dan seperti biasa di IE 6 tampilannya tidak pas horizontal, karena itu perlu diperbaiki dengan memberikan display:inline pada tag
  • 
    

    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="#">Homea>
     <ul>
      <li>» <a href="#">Artikela>
      <ul>
       <li>» <a href="#">CSSa>
       <ul>
        <li>» Membuat Menuli>
       ul>li>
      ul>li>
     ul>li>
    ul>

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