Tumben hari ini saya bangun jam 1 siang, mungkin lantaran baru ganti sprei yang setelah hampir 3 bulan tidak diganti + efek kekenyangan makan roti connato 4 bungkus sendirian. Jadinya yaw ke-enakan tidur sampai lupa waktu. Nyalain laptop lagi untuk oprek query database aplikasi perwalian yang belum sempat saya benahi tadi malam. Akhirnya berkat kekuatan super yang dihasilkan roti-roti conatto yang saya santap semalam, query database-nya terbenahi sudah. Tidak disengaja, saya menemukan sebuah studi kasus baru pada aplikasi ini. Ketika saya ingin menambahkan sebuah menu yang bisa ikut kemana saja saat mouse di-scrool (naik-turun). Istilah kerennya, floating menu atau menurut bahasa manusiawi-nya menu melayang. “Duch, masih belum ngerti nih sama floating menu, ada contohnya gak…???”. Contohnya sudah terdapat di blog saya ini, tepatnya di sisi sebelah kanan. Saya gunakan untuk menampilkan tombol like. Hehe..agak narsi memang(tak apalah, juga blog sendiri). Dulu saya pernah membuat floating menu, tapi syntax javascriptnya sangat panjang dan tidak nikmat dicerna oleh otak maupun mata. Setelah keliling mencari referensi tentang floating menu yang menggunakan jQuery, akhirnya ketemu juga sebuah plug-in jQuery yang bernama jquery_dimension.js. Dan beginilah cara implementasinya :
1. Buat file dengan nama index.html dan kita panggil terlebih dahulu file jquery.js dan jquery_dimension.js. Kalau belum punya, silahkan download di jQuery library dan jQuery Dimensions plugin.
<script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.dimensions.js" type="text/javascript"></script>
2. Kita menggunakan sebuah listener untuk menjalankan event scrool page, kira-kira kustomasi syntax jQuery-nya seperti di bawah ini :
var nama = "#menuFloat";
var menuYlock = null;
$(document).ready(function(){
menuYlock = parseInt($(nama).css("top").substring(0,$(nama).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYlock+$(document).scrollTop()+"px";
$(nama).animate({top:offset},{duration:500,queue:false});
});
});;
3. Sekarang lanjut ke pembuatan syntax html-nya, saya contohkan yang sederhana saja, selebihnya bisa di-kreasikan sesuai kreatifitas rekan-rekan.
<div id="menuFloat"> <div id="menukanan" style="float:right; width:260px; position:absolute;"> <ul> <li>Home</home> <li>About</li> <li>Contact</li> </ul> </div> </div>
4. Dan terakhir, jangan lupa untuk menambahkan sebuah style css. Karena kita perlu memberikan style position pada id menuFloat, yang bernilai absolute, agar tetap tampil di urutan layer yang paling atas.
<style type="text/css">
#menuFloat {
position:absolute;
top:16px;
left:50%;
margin-left:235px;
width:270px;
}
</style>
Sampai disini, floating menu yang kita buat sudah jadi. Tinggal di atur saja tampilan css-nya agar terlihat cantik ketika dipasangkan di website. OK deh, semoga sedikit trik ini bisa bermanfaat untuk rekan-rekan semuanya.
Happy Blogging and Keep Coding
Cheerrrsss….!!!!
