MEMBUAT DROP DOWN MENU SEDERHANA DI WEBSITE
|
| DropDowns |
Dropdown biasanya yang sering kita temui denganBantuan 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 CSSyang dibubuhi sedikit trik.
Dropdown menu berfungsi saat kita membutuhkan sub menu untuk menu utama. Pada posting kali ini saya akan mencoba membuat menu dropdown sederhana dengan menggunakan css (Cascading Style Sheet). Disini saya akan Membuat dua buah file yaitu style.css yang berfungsi untuk mengatur tampilan dari code html dan yang kedua adalah dropdown.html yang akan tampil di dalam browser internet. Kedua file ini harus diletakkan dalam folder yang sama.
Berikut adalah kode membuat Dropdown :
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin:0;
opacity:.9
text-align:center;
}
list-style-type:none;
ul#menu li, ul#menu ul.sub-menu li {
display:inline-block;
text-decoration:none;
width:120px
}
ul#menu li a, ul#menu li ul.sub-menu li a {
color:#fff;
ul#menu li a:hover, ul#menu li ul.sub-menu li a:hover {
background:#666;
padding:5px;
display:block
}
background:#333
}
ul#menu li {
top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
position:relative
}
ul#menu li ul.sub-menu {
position: absolute;
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 -->
