Membuat box drop bisa digunakan sebagai konten tambahan pada blog atau web yang biasanya pada tampilan awal tidak mempunyai banyak space untuk ditampilkan maupun hanya untuk mempercantik web/blog. Untuk membuatnya bisa didapatkan dengan memanfaatkan tag html seperti div, ul, li, dsb. Pada contoh ini akan digunakan div sebagai tagnya hanya tinggal memodifikasinya dengan memberikan pengaturan style pada css.
Langkah pertama adalah menambahkan jQuery code untuk diload kehalaman, pakai dari google saja karena seperti yang kita tahu server mereka sangat baik, jadi biar cepat loadnya. Taruh line code berikut diantara <head>disini</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>Langkah selanjutnya saya akan buat div sebagai container, div ini mewakili container atau wrapper, jadi anggap saja sebagai dummy blog target, hasilnya seperti dibawah ini.
div container
HTML div container:
<div id="demo_container">
<hr />div container
</div>CSS div container:
#demo_container {
width:500px;
height:150px;
background:#a6b0b2;
border:2px solid #000;
text-align:center;
overflow: hidden;
}Oke, dari sini selanjutnya tinggal mengkonsep bagaimana arah jatuhnya div box tersebut dan berapa tingginya. Jika melihat dari code HTML dan CSS diatas, ada tag <hr /> itu berfungsi hanya untuk peraba saja, agar tahu bagaimana nanti respon dari konten yang ada pada demo_container, sedangkan ukuran container mempunyai tinggi 150 pixel dan lebar 500 pixel, jadi konsep drop box akan dibuat lebar 400 pixel pada posisi tengah dengan tinggi 15 pixel saat normal dan 80 pixel saat tersentuh mouse.
HTML div container & drop
<div id="demo_container">
<div id="drop_box">
Halo, ini adalah content drop box!<br/>
Rencana mau digunakan untuk apa?<br/>
Apapun itu, yang penting saya membuatnya dulu deh : )
<div id="demo_sentuh_aja">sentuh aja</div>
</div>
<hr />div container</div>CSS div container & drop
#demo_container {
width:500px;
height:150px;
background:#a6b0b2;
border:2px solid #000;
text-align:center;
overflow:hidden;
}
#drop_box {
width:400px;
height:80px;
margin:-65px auto 0px auto;
background:#eee;
border:1px solid #000;
padding:5px 5px 0px 5px;
}
#demo_sentuh_aja {
height: 10px;
text-align:right;
}Jika dilihat dari CSS untuk style #drop_box, saya hanya bermain-main dengan ukuran minus dan plus saja yang nanti di konekkan dengan javascript jQuery untuk animasinya.
Selanjutnya mari kita tambahkan javascript jQuery untuk mengaktifkan fungsinya.
Selanjutnya mari kita tambahkan javascript jQuery untuk mengaktifkan fungsinya.
jQuery animasi div
<script language="javascript"> $(document).ready(function() { $('div#drop_box').hover(function() { $(this).stop().animate({ marginTop: 0 }, 'slow'); }, function() { $(this).stop().animate({ marginTop: -65 }, 'slow'); });}); </script>
Moga Bermanfaaf