Menu Dropdown Sederhana Tanpa Javascript

Untuk membuat Menu bergaya Dropdown biasanya yang sering kita temui dengan bantuan javascript. Namun disini saya akan paparkan bagaimana cara yang paling mudah hanya untuk membuat menu dropdown tanpa kode javascript yang diembed maupun inline, cukup dengan kode CSS yang dibubuhi sedikit trik.

Sekalipun anda tidak mengaktifkan javascript pada browser, dropdown ini sudah pasti tetap berjalan karena yang kita gunakan hanyalah kode CSS dan HTML. Kalau dinilai dari sisi besar-kecilnya source, maka dengan cara sederhana ini kapasitasnya akan lebih kecil dan pengaksesannya lebih cepat dibanding menggunakan javascript.

Berikut kode untuk membuat menu Dropdown tersimpel bahkan tergampang sedunia :

ul#menu, ul#menu ul.sub-menu {
 padding:0;
 margin:0;
 text-align:center;
 opacity:.9
}

ul#menu li, ul#menu ul.sub-menu li {
 list-style-type:none;
 display:inline-block;
 width:120px
}

ul#menu li a, ul#menu li ul.sub-menu li a {
 text-decoration:none;
 color:#fff;
 background:#666;
 padding:5px;
 display:block
}

ul#menu li a:hover, ul#menu li ul.sub-menu li a:hover {
 background:#333
}

ul#menu li {
 position:relative
}

ul#menu li ul.sub-menu {
 position: absolute;
 top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
 display:none
}

ul#menu li:hover ul.sub-menu {
 display:block
}

<ul id="menu">
 <li><a href="#">Menu 1</a></li>
 <li><a href="#">Menu 2</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 3</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 4</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
   <li><a href="#">Sub Menu 3</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 5</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
   <li><a href="#">Sub Menu 3</a></li>
   <li><a href="#">Sub Menu 4</a></li>
  </ul>
 </li>
</ul>
<!-- tanda # ganti dengan alamat URL yang sobat inginkan -->

Demo :

Silakan dicoba di website masing-masing. Jika ingin menggunakan menu dropdown ini pada Blogger, maka kode CSS diletakkan pada bagian dalam <b:skin><![CDATA[ atau <style>. dan kode HTML diletakkan pada bagian dalam <BODY> ► #PageList.

 

Contact Form

Name

Email *

Message *

Recent Comment

Baca artikel lainnya :

Memuat...