Halo teman – teman semuanya, selamat datang di website tips dan trik Dumet School. Berjumpa kembali dengan saya yang akan selalu memberikan tips dan trik tentang Modifikasi Menu Dropdown Dengan Fungsi z-index. Pada pertemuan kali ini saya akan share bagaimana kendala saat kita sedang membuat menu dropdown native, tetapi pada saat dropdown sudah jadi dan di bawahnya ada sebuah content lagi maka dropdown akan tertimpa oleh content tersebut. Nah fungsi z-index inilah yang akan kita gunakan. Apa itu fungsi z-index..??
Fungsi z-index berguna untuk mengatur content yang tertumpuk dan juga bisa menyisipkan content di bawahnya, jika masih bingung teman – teman bisa lihat artikel sebelumnya di Mengenal Fungsi Z-index Pada CSS supaya lebih mengerti dan paham. Oke di bawah ini saya memiki sebuah menu dropdown dan di bawah nya ada slider nya
Bisa teman – teman lihat pada gambar di atas ini, menu About Us memiliki dropdown dan dropdown tersebut terpotong tertimpa slider. Ada beberapa penyebabnya yaitu dropdown bentrok dengan plugin slider, kemudian jika ada pembungkus yang di berikan fungsi css overflow : hidden; maka dropdwon akan tertimpa. Maka dari itu banyak sekali teman – teman mengalami banyak kendala dalam hal ini, di artikel kali ini tentang Modifikasi Menu Dropdown Dengan Fungsi z-index tentunya ada alasan mengapa saya membahas tentang ini. Agar teman – teman bisa mengetahui beberapa penyebabnya dan menanganinya, oke saya berikan dropdown dengan fungsi z-index nya
Maka dropdown akan timbul paling depan
Jika teman – teman ingin mempraktekkan nya bisa lihat pada gambar di bawah ini
Dan di tambahkan css nya
menu ul {background-color: orange}
menu li {float: left; background-color: orange; width: 200px; list-style: none; padding-top: : 10px; position: relative;}
menu a {padding: 10px; margin: 10px; text-decoration: none; display: block; text-align: center; color: #333}
menu a:hover {color: #fff}
menu li > ul {position: absolute; left: 0; top: 50px; display: none;z-index: 999;}
menu li:hover > ul {display: block;}
menu li > ul a:hover {background-color: #95a5a6}
Jika masih bingung teman – teman bisa komentar di artikel ini, sekian dulu pada artikel kali ini tentang Modifikasi Menu Dropdown Dengan Fungsi z-index kita berjumpa berjumpa kembali pada artikel yang akan datang. Semoga bermanfaat, terimakasih dan sampai jumpa.