Hover Buka Kotak Elemen ke Bawah

Hari ini saya belajar atau lebih tepatnya meniru elemen yang bila di :hover (hover = melewatkan penunjuk tetikus di atasnya) maka elemen akan membuka ke bawah. Saya tiru perilaku ini dari Bitdefender report. Saya senang melihatnya lalu saya mulai meniru :)

Belum jelas? Bayangkanlah tombol sosial media yang sering kita temukan di sebuah situs, biasanya di sisi kanan atau kiri halaman. Terlihat sebagian dan tersembunyi sebagian, saat di :hover barulah bagian yang tersembunyi itu menyembul keluar.

Saya coba menerapkan perilaku ini dalam postingan blogger.

Saya tunjukkan sebuah contoh agar lebih jelas apa yang saya maksudkan. Lihat demo di bawah ini.

Tidak Bernapas Ketika Minum

Diriwayatkan dari Abu Qatadah r.a. : Rasulullah SAW pernah bersabda, “kapan pun kalian minum air, tidak boleh bernapas di dalam tempat air minum itu. Dan kapan pun kalian pergi ke kamar mandi, tidak boleh menyentuh atau membasuh kelamin dengan tangan kanan”.

Membuat ini tidaklah terlalu sulit. Hanya dibutuhkan sepotong JavaScript (HTML juga CSS pastinya).

Mari kita periksa. Secara berturut-turut CSS, HTML, dan JavaScript, sebagai berikut.

.kotak_isi {
    border:1px solid #cccccc;
    border-radius:5px;
    width:418px;
    margin-top: 9px;
    left:50px;
    position:absolute;
    background:#efefef;
    z-index:999999;
    top:10px;
}
.hijau {
    border-radius:5px;
    background:#9bd344;
    height:40px;
    border:1px solid white;
    width:416px;
    overflow-y:hidden;
    transition:height 0.2s, transform 0.2s;
    -moz-transition: height 0.2s, -moz-transform 0.2s;
    -webkit-transition: height 0.2s, -webkit-transform 0.2s;
    -o-transition: height 0.2s, -o-transform 0.2s;
    //text-shadow: 1px 1px 0px #ccff99;
    filter: dropshadow(color=#ccff99, offx=1, offy=1);
}
.hijau:hover {
}
.hijau .icon {
    background:url(http://3.bp.blogspot.com/-UM-lcL58FFA/U2siZsj8eDI/AAAAAAAAFcI/5sL2RyVXnAY/s1600/stat_green.png) no-repeat;
    position:absolute;
    width:45px;
    height:45px;
    top:-1px;
    left:-20px;
}
.isi_penjelasan {
    color:black;
    font-size:12px;
    line-height:12px;
    padding-top:7px;
    display:block;
    padding-left:35px;
    padding-right: 10px;
    min-height:40px!important;
    margin-bottom:20px;
}
.lanjut {
    padding-top:15px;
}
ul.lanjut li {
    list-style:square;
    margin-left:15px;
    padding-bottom: 5px;
}

<!--drop hover jQuery-->
<div id='peringatan'>
    <div class="kotak_isi">
        <div class="warna hijau">
            <div class="icon"></div>
            <div class="isi_penjelasan">Get the most out of your product. Follow our recommendations to get maximum protection.
                <ul class="lanjut">
                    <li>Keep your files always up-to-date in a secure online location to be able to retrieve it wherever you go. Go to Safebox and activate the Autosync.</li>
                    <li>Keep your files always up-to-date in a secure online location to be able to retrieve it wherever you go. Go to Safebox and activate the Autosync.</li>
                    <li>Keep your files always up-to-date in a secure online location to be able to retrieve it wherever you go. Go to Safebox and activate the Autosync.</li>
                </ul>
                <br />
            </div>
        </div>
    </div>
</div>

$(document).ready(function () {

    entah = $('#peringatan').find('.warna').height();

    $('#peringatan').find('.warna').mouseenter(function () {
        $(this).css('height', $(this).children('.isi_penjelasan').height())
    })
    $('#peringatan').find('.warna').mouseleave(function () {
        $(this).css('height', entah)
    })

});

Tentu, Anda sudah harus memasang jQuery agar fungsi ini berjalan.

Selamat belajar :)