Cara Membuat Menu Melayang Dengan Jquery Dan CSS

Hey Sobat Cyber Creative ... Sudah Pernah Melihat Menu Melayang ? Pasti Sudah Kan... Kali Ini Gw Mau Share Trik " Cara Membuat Menu Melayang Dengan Jquery Dan CSS " Pasti Penasaran Kan Bagaimana Bentuknya...
Berikut Scren Shot Menu Nya

Gimana ? Keren Kan
Mau Tahu Cara Nya

Mari Kita Coba Tutorial Berikut Ini

• Pergi Ke Blogger
• Klik Template > Edit HTML
• Lalu Paste Kode CSS Berikut Ini Tepat Di Atas Kode ]]></b:skin>

#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 Masukan Script Berikut Ini Di Atas Kode </head>

<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 Masukan Kode HTML Di Bawah Ini 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>

Note:
-Ganti tanda # dengan Url sobat.
-Ganti juga Nama link sobat.

Selesai Deh..

Sekian Trik Dari Blog Cyber Creative

Selamat Mencoba Dan Jangan Lupa Tingalkan Comment Nya :D