Membuat Menu Melayang dengan Sentuhan Jquery dan CSS3

Udah pernah lihat menu melayang belum ?pasti sudah kan..kali ini gue 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.contoh'a bisa sobat lihat disini mau tau cara'a?lets go...

Pertama-tama 

• Log in ke blogger

• Pilih rancangan

• Pilih edit HTML

• Lalu maukan 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 kode warna dapat diganti sesuai keinginan sobat

• Kemudian sobat masukan kode dibawah ini dibawah 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>

• lalu masukan kode dibawah ini diatas 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.
- Apabila tidak berhasil delete aja onclick="return false;"

• Selesei,,,

Posted in: NgeBlog