Saya kira anda sudah mengetahui maksud tulisan saya Membuat Objek Selalu Di Depan Menggunakan CSS ini. Iya benar, tujuan tulisan ini adalah menceritakan bagaimana saat kita mendesign suatu objek dalam web selalu berada di depan. Untuk lebih jelasnya bisa melihat gambar menu di kompas dimana menu berada di depan gambar cuma nggak tahu yang membuat web tersebut memakai cara yang saya pergunakan ini atau tidak, namun tujuan saya kali ini membuat hasil seperti itu (lihat gambar). Pengalaman yang melatar belakangi penulisan ini adalah tatkala saya membuat web dengan menu drop down menggunakan CSS dan JavaScript. Dimana Menu tersebut bisa berjalan normal, namun tatkala di bawahnya menggunakan css lain untuk objek lainnya hasil dari menu tersebut tidak kelihatan karena tertutup oleh layer objek di bawahnya (kalau saya gambarkan memakai gambar disamping menu tidak berada di depan gambar laptop tersebut seperti itu tapi dibelakangnya).
Saya berusaha mencari sana-sini bagaimana mengatasi masalah tersebut tapi tetap saja nihil hasilnya. Saya coba berganti css menu gratisan lain tetap juga sama hasilnya. Saya telah mencoba SuckerTree Horizontal Menu, P7_ExpMenu dan sempat melirik yang lainnya ternyata hasilnya sama drop down menu-nya tertutup layer setelahnya. Saya coba memainkan float, visibility, position, clear dan css lainnya tetap juga nihil.
Akhirnya saya coba-coba dan menemukan jawabannya. Yah setelah berhasil saya coba akhirnya saya posting sebagai dokumentasi bila sewaktu-waktu membutuhkan lagi atau mungkin ada yang lain yang ingin membutuhkan. Caranya sangat mudah yaitu dengan membuat CSS menu drop down dengan kod sebagai berikut.
position:relative;
z-index: 100;
Dalam hal ini saya menggunakan SuckerTree Horizontal Menu jadi dua line kode tersebut saya sisipkan pada class suckertreemenu. Lengkapnya sebagai berikut :
.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
background-color: #09182A;
border:solid;
border-color:#345FB6;
border-left-width:0px;
border-top-width:1px;
border-right-width:0px;
border-bottom-width:1px;
position:relative;
z-index: 100;
}
Cukup mudah bukan ? Oh iya ini wajib untuk di lakukan dalam posting akhir-akhir ini, yaitu tak lupa untuk mengingatkan Kenali dan Kunjungi Objek Wisata di Pandeglang dan meminta dukungan biar saya menjadi juara dalam kontes tersebut.
