Sumber Gambar : bobcravens.com

Bagi anda yang kerap bermain dengan program ataupun web tingkat lanjut, istilah tersebut mungkin sudah tidak asing. Dropdown menu adalah menu yang memiliki anak menu. Sebagai contoh, ketika anda membuka windows explorer, pada pojok kiri atas terdapat menu File, yang mana apabila menu tersebut diklik akan menampilkan sederetan menu lain seperti rename, delete, dsb.

Sebagian webdesigner dan webprogrammer menggunakan jenis menu ini untuk mempercantik tampilan web yang sedang mereka garap. Salah satu cara yang kerap digunakan adalah dengan menggunakan bantuan JavaScript maupun JQuery. Kedua script tersebut memang memberikan hasil yang optimal pada tampilan web. Namun bagaimana jika client men-disabled kemampuan baca javascript dari browser yang dimilikinya? Atau bagaimana jika browser client tidak support dengan javascript? Meski dua hal tersebut jarang ditemui, namun tidak menutup kemungkinan hal tersebut dapat terjadi. Sebagai seorang webprogrammer, kita harus dapat membuka pandangan mengenai semua kemungkinan yang dapat terjadi terhadap produk yang sedang kita kerjakan.

Untuk membuat dropdown menu, dapat dilakukan dengan menggunakan CSS dan HTML. Tidak percaya? Berikut akan dijelaskan sedikit tentang Membuat Dropdown Menu Tanpa Javascript.

Algoritma program kita kali ini cukup sederhana:

1. Membuat menu utama dan anak menu.
2. Menyembunyikan anak menu.
3. Menampilkan anak menu ketika cursor diletakkan diatas (hover).

Langsung aja, kita bikin format menu kita :

<div id="menu">
 <ul>
    <li><a class="mom" href="#">Home</a></li>
    <li>
      <div id="child">
        <a href="#">Menejemen Pegawai</a>
        <a href="#">Tambah Pegawai</a>
        <a href="#">Menejemen Level</a>
      </div>
      <a class="mom" href="#">Pegawai</a>
    </li>
 </ul>
</div>

Pada potongan program tersebut, terdapat sebuah div#menu yang merupakan tempat meletakkan seluruh elemen menu. Di dalamnya terdapat Unordered List <ul> yang di dalamnya terdapat dua buah List Item <li>. Dalam list item dapat berisi dua elemen pokok, yaitu a.mom sebagai menu utama dan div#child sebagai anak menu.

Setelah selesai dengan format menu, saatnya memberi css :

<style>
#menu ul {
   line-height:30px;
   list-style:none;
   padding:0;
   margin:0 20px;
}
#menu ul li {
   display:inline;
   margin:0 5px;
}
#menu ul li a.mom {
   background:#903;
   display:inline-block;
   padding:0 10px;
   color:#FFF;
}
#menu ul li:hover > #child {
   visibility:visible !important;
}
#menu ul li:hover > a.mom {
   background:#CCCC66;
   color:#000;
}

#child {
   display:inline;
   margin:30px 0 0 -5px;
   position:absolute;
   z-index:10;
   visibility:hidden !important;
   border:1px solid #000;
}
#child a {
   display:block;
   padding:5px 40px 5px 5px;
   background:#2D5082;
   color:#FFF;
   border-bottom:#CCC 1px solid;
}
#child a:hover {
   background:#A6DCFF;
   color:#000;
}
</style>

Terlihat rumit mungkin, tapi inti dari CSS tersebut adalah pada bagian yang saya tebalkan (bold) dan saya beri tag !important. Visibility dari #child diberi nilai hidden pada awalnya. Setelah ListI Item <li> di-hover, maka #child berubah menjadi visible. --intinya gitu.

Hasil dari percobaan di atas adalah: » seperti ini «