Floating Menu dengan Sentuhan jQuery

Written by RA_Syihan on Saturday, December 18, 2010 | Category: CSS3, Trick, Tutorial

Satu lagi trik yang akan saya berikan kepada sobat-sobat Blogger, Blogger Indonesia maupun Blogger Mancanegara yaitu Floating Menu dengan Sentuhan jQuery. Okay dah, sekarang saya akan menjelaskan dan memberikan cara-cara membuat Float Menu Melayang.
Demonya bisa sobat lihat pada Blog Saya ini, pada pojok kanan atas.
Keren kan? terlihat Elegant kalau menurut saya. hhaha ...
Sebenarnya trik ini berkaitan juga dengan posting Cara Membuat Menu Melayang yang dulu. Atau sama saja dengan Membuat Float Box dengan Efek Opacity. Hanya saja postingan ini adalah gabungan antara keduanya, meskipun agak beda-beda dikit kodenya. hhha..
ya langsung sajalah, ini dia ...
jreeng ... jrenngg ..

Seperti biasa, Login dulu ke Blogger sobat
Pilih Rancangan
Lalu Pilih tambah Gadget > Pilih tamabah HTML/Javascript
lalu masukan kode berikut
<style type="text/css">
#hitsukeFX{
position:fixed;
top:20px;
z-index:+1000;
}
.hitsukeFXtab{
height:100px;
width:55px; float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijzvmpPAfHh3FGTieyUsIcmlE4JlAzHw9UK6Sjf2TUchFq1pzOG_i7RLVOkMbbuv-JRg3dHNwk4-D-OlaimugNm_MndEk-Auo_f5P0hhebe4zc5SQYUPuqFrcg3rKhs8xC0_n4ngyWqfGH/') no-repeat;
}
.hitsukeFXcontent{ float:left;
border:2px solid tranparent;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
background: #000000;
padding:2px;
opacity:0.4;-moz-opacity:0.4;filter:alpha(opacity=40);
}
.hitsukeFXcontent:hover {
opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);}

</style> <script type="text/javascript">
function showHidehitsukeFX(){
var hitsukeFX = document.getElementById("hitsukeFX");
var w = hitsukeFX.offsetWidth;
hitsukeFX.opened ? movehitsukeFX(0, 30-w) : movehitsukeFX(20-w, 0);
hitsukeFX.opened = !hitsukeFX.opened;
}
function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} }
</script>
<div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div>
<div class="hitsukeFXcontent">
Kode Widget/konten kamu disini
<div style="text-align:right">
<a href="javascript:showHidehitsukeFX()"> [close!] </a>
</div>
</div>
</div>
<script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>
Lalu klik Simpan
Jadi deh menu melayang sobat ,...