CARA MEMBUAT MENU DROPDOWN HTML DAN CSS
Pada pemabahasan sebelumnya, saya sudah membahas tentang cara membuat navigasi bar. dan kali saya akan membahas tentang menu dropdown. dan gunanaya menu dropdown ini agar memberikan menu menu lain pada masing - masing menu dari navigasi, contohnya seperti di gambar.
oke, pertama siap kan terlebih dahulu kode html nya :
<div class="dropdown"><a href="#etc" class="nav-l">kategori</a>
<div class="dropdown-child">
<a href="#link">Debian</a>
<a href="#link">Cisco</a>
<a href="#link">Mikrotik</a>
</div>
</div>
<div class="dropdown-child">
<a href="#link">Debian</a>
<a href="#link">Cisco</a>
<a href="#link">Mikrotik</a>
</div>
</div>
lalu tambahkan script css nya :
.nav-l {
height: 18px;
font-size: 16px;
font-family: consolas;
color: #FFFFFF;
text-decoration: none;;
display: inline-block;
padding: 21px;
transition: 0.5s;
}
.nav-l:hover {
color: #30A6E0;
}
.dropdown {
display: inline-block;
}
.dropdown-child {
display: none;
position: absolute;
}
.dropdown-child a {
display: block;
min-width: 200px;
padding: 10px 20px;
text-decoration: none;
text-align: center;
position: relative;
background-color: #35ACD0;
color: #FFFFFF;
transition: 0.5s;
}
.dropdown-child a:hover {
background-color: #12435F;
}
.dropdown:hover .dropdown-child {
display: block;
}
Keterangan :height: 18px;
font-size: 16px;
font-family: consolas;
color: #FFFFFF;
text-decoration: none;;
display: inline-block;
padding: 21px;
transition: 0.5s;
}
.nav-l:hover {
color: #30A6E0;
}
.dropdown {
display: inline-block;
}
.dropdown-child {
display: none;
position: absolute;
}
.dropdown-child a {
display: block;
min-width: 200px;
padding: 10px 20px;
text-decoration: none;
text-align: center;
position: relative;
background-color: #35ACD0;
color: #FFFFFF;
transition: 0.5s;
}
.dropdown-child a:hover {
background-color: #12435F;
}
.dropdown:hover .dropdown-child {
display: block;
}
kenapa menudropdown bisa terlihat saat disentuh? ini karena pada class ".dropdown-child" di set "display: none;" agar tidak bisa dilihat. dan pada ".dropdown:hover .dropdown-child" di set"display: block;" class ini gunanya ketika kita sentuh tag atau menu(kategori) maka akan tampil menu dropdownnya kebawah.
kenapa ".dropdown-child" di set "position: absolute;"? karena agar pada tag menu dropdown tidak memuat pada bagian web nya, hanya saja mengambang.
