Nice Floating Menu Using jQuery !

Yuhuu... posting agy cuy... kali ini tentang floating menu . floating menu itu yg gimana sih ? itu tuh menu yg di sebelah kiri blog q.. tapi kali ini, menu yg aku share cuma sekedar memberikan efek floating pada menu . Coba deh liat demonya disini

Demo

Gimana ? mungkin style nya ga terlalu bagus.. wkwkwkkw kan bisa lu edit ndiri kale.. yg penting effect nya ya kan sob ? langsung ajah caranya bro..

1. Masukin script ini dibawah </head>..


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://granoblog.googlecode.com/files/jquery.dimension.js' type='text/javascript'></script>


2. ini css nya bro, uda tau kan dimana tempat css ?


#floatMenu {
position:absolute;
top:150px;
float:right;
width:200px;
}
#floatMenu ul {
margin-bottom:10px; list-style: none;
}
#floatMenu ul li a {
display:block;
border:1px solid #999;
background-color:#222;
border:2px solid #999;-moz-border-radius: 12px;
-webkit-border-radius: 12px;
text-decoration:none;
text-align:center;
color:#ccc;
margin-bottom:10px;
}
#floatMenu ul li a:hover {
color:#fff;
background-color:#333333;
}
#floatMenu ul.menu1 li a:hover {
border-color:#fff;
}
#floatMenu ul.menu2 li a:hover {
border-color:#fff;
}

Nb: Sesuai kata2 saya tadi, untuk hasil yg lebih memuaskan edit ndiri yah bro..

3. Javascriptnya sob, taruh di bawah sacript jquery tadi



<script language='javascript'>
var name = "#floatMenu";
var menuYloc = null;

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


Nb:
>> duration:1500 . ini adalah seberapa cepat effect floating . Semakin banyak durationya . semakin lambat pula effect floatingnya .

4. HTML, taruh dibagian body yah..


<div id='floatMenu'>
<ul class='menu1'>
<li><a href='#'> Home </a></li>
</ul>
<ul class='menu2'>
<li><a href='#'> Contact </a></li>
<li><a href='#'> Rss </a></li>
<li><a href='#'> Apa lagi yah ? </a></li>
</ul>
</div>



nah selesai deh.. gampang kan sob ?? bagus lagi