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 :
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><
Tidak ada komentar:
Posting Komentar