Membuat menu melayang dengan sentuhan Jquery dan CSS3

What Up Bro?
udah pernah lihat menu melayang belum?pasti sudah kan..
kali ini saya mau share trik menu melayang,tetapi menu ini dilengkapi jquery dan css3.effect animasi hover'a dengan css3 dan effect melayang dengan jquery yang selalu mengikuti layar kita

Pertama,buka blogger sobat, Rancangan => Edit HTML
lalu masukan kode css dibawah ini ke template sobat

 #floatMenu {
position:absolute;
top:150px;
left:50%;
margin-left:235px;
width:80px;}
#floatMenu ul {list-style-type: none;}
#floatMenu ul li a {
display:block;
background:-moz-linear-gradient(-90deg, #222, #2b2b2b) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, left top, left bottom, from(#222), to(#2b2b2b));
border:1px solid #999;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
width:80px;
-webkit-transition: all 0.6s ease-out;
box-shadow: #333 0px 0px 10px;
-moz-box-shadow: #333 0px 0px 10px;
-webkit-box-shadow: #333 0px 0px 10px;
}
#floatMenu ul li a:hover {
color:#fff;
background-color:#333333;
border-right:6px solid #999;
width:150px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 0px;
}
#floatMenu ul.menu1 li a:hover {border-color:#09f;}

Note:
-bila sobat ingin mengganti warna background menu'a,sobat tinggal ganti kode warna'a.
-sobat juga bisa ganti warna hover menu'a dengan mengganti kode warna'a.



Selanjutnya.sobat masukan script di bawah ini di bawah kode ]]></b:skin>

<script language="javascript" src="https://sites.google.com/site/djogzs/js/jquery_mini.js"></script>
<script language="javascript" src="https://sites.google.com/site/djogzs/js/jquery.dimensions.js"></script> 
<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:500,queue:false});
});
}); 
</script>
  

terakhir..Agan-agan masukan kode html di bawah ini di elemen halaman sobat,atau bisa di template sobat di atas kode </body>

 <div id="floatMenu"> 
<ul class="menu1"> 
<li><a href="#" onclick="return false;"> Home </a></li> 
<li><a href="#" onclick="return false;"> About </a></li> 
<li><a href="#" onclick="return false;"> Contact </a></li> 
<li><a href="#" onclick="return false;"> Blog </a></li> 
<li><a href='#' onclick='MGJS.goTop();return false;' onclick="return false;"> Back to top </a></li> 
</ul> 
</div> 

Smoga Bermanfaat