Membuat Floating Menu (Jquery)

Floating menu adalah menu navigasi melayang yang selalu mengikuti halaman. untuk lebih jelasnya silakan lihat di blog djepara, atau javascript-fx, serta di nettuts. jika sudah tahu, sekarang cara memasang pada blog. langsung saja...

Berikut adalah cara memasangnya sesuai yang style yang saya pasang pada  djepara.

Karena effect ini menggunakan jquery, maka siapkan dulu jquerynya, yaitu :

<script src='http://javacuss.googlecode.com/files/jquery-1.4.2.min.js' type='text/javascript'/>

Jika pada blog anda sudah ada jquery, maka kode diatas tidak perlu dipasang. Jquery dubutuhkan untuk memberikan sentuhan lembut saat melayang.
Selanjutnya pasang javascript berikut :

<script src='http://granoblog.googlecode.com/files/jquery.dimension.js' type='text/javascript'/>
<script language='javascript'>
var name = &quot;#floatMenu&quot;;
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css(&quot;top&quot;).indexOf(&quot;px&quot;)))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+&quot;px&quot;;
$(name).animate({top:offset},{duration:1500,queue:false});
});
});
</script>

Note : duration:1500 . ini adalah seberapa cepat effect floating . Semakin banyak durationnya . semakin lambat pula effect floating atau melayangnya .

Lalu pada kode CSS masukkan kode berikut, sesuai dengan style yang ada pada djepara

/*-- (FLoatmenu) --*/
#floatMenu {
background: #50504A url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeDiIJUQrebre1934JdcMF9olSJcaaRi1ARJRAsEa4mRFPMAcJHcWTvhbUXC046XWeaD7AUFzMuZjks1tigg9PneY0CCcKubcpnFFE9PJzoNvnhZBjEqt8X6Diqm0dLIi2ryhrPpqB7ds/s1600/grain_dark.gif);
    margin: 0 auto;
position:absolute;
padding: 4px;
width: 160px;
top:50px;
right:20px;
text-align:center;
color: #222;
text-shadow: 0px 1px 2px #555;
}
#floatMenu ul {
    background: #353535 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOjB_XFR7tVPK8cjCVTd6L9vfec53N1Pgd0A4O4X9wrpny7HuFKiX7SPRieVD-5Eo6gvCSsdNiVRHgt8QzPCnyLr5o7g5HIRhbrHAmdkz5fP-oP-mKGjhHGAcJfEV6vPaLQi_qIkN2IQw/s1600/navigation.jpg) repeat-x;
    border-bottom: 1px solid #222;
    border-top: 1px solid #555;
width: 160px;
    margin: 0 auto;
    border-top: 1px solid #333;
font: bold 1.1em Verdana,sans-serif;
color: #222;
text-shadow: 0px 1px 2px #555;
}
#floatMenu ul li a {
font: bold 1.1em Verdana,sans-serif;
text-decoration:none;
text-align:center;
color: #222;
text-shadow: 0px 1px 1px #555;
margin-bottom:10px;
}
#floatMenu ul li a:hover {
color:#CCCCCC;
text-shadow: 0px 2px 1px #222;
}
#floatMenu ul.menu1 li a:hover {
color:#CCCCCC;
text-shadow: 0px 2px 1px #222;
}
#floatMenu ul.menu2 li a:hover {
color:#CCCCCC;
text-shadow: 0px 2px 1px #222;
}

Note: kalian bisa merubah style CSS diatas sesuai dengan selera

Lalu pasang kode HTML-nya dan isikan sesuai dengan link yang mau dipakai

<!-- START:FloatMenu -->
<div id='floatMenu'>
<ul class='menu1'>
<li class='current_page_item'><a expr:href='data:blog.homepageUrl'>Home</a></li>
</ul>
<ul class='menu2'>
<li><a href='#'> About </a></li>
<li><a href='#'> Contact </a></li>
</ul>
<ul class='menu1'>
<li><a href='#'> Photo </a></li>
<li><a href='#'> Dokumen </a></li>
</ul>
</div>
<!-- END:FloatMenu -->

Selesai sudah.. silakan mencoba, jika ada pertanyaan, kritik, saran maupun kiriman uang, jangan sungkan silakan tulis pada kotak komentar dibawah... and if you like please don't forget Ikuti di Buzz

Your comment make me better