Membuat menu melayang dengan Jquery dan CSS3

Membuat menu melayang dengan Jquery dan CSS3

Assalamualaikum Wr. Wb.

Hai sahabar Blogger. Mumpung hari ini cepet mengerjakan US, saya akan membagikan Ilmu saya yang saya dapatkan dari Johanes. 

Di lihat dari Judul saja sudah tau kan, langsung aja bentuknya juga sperti yang digambar.. :

Pertama,buka blogger sobat, Rancangan => Edit HTML
lalu masukan 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.

Selanjut'a.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..sobat masukan kode html di bawah inidi elemen halaman sobat,atau bisa di template sobat di atas kode

<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.

Udah Jadi dah,,,
Nah saya gak lupa berterima kasih ke pada Johanes DJ

Anda sedang membaca artikel tentang Membuat menu melayang dengan Jquery dan CSS3 dan anda bisa menemukan artikel Membuat menu melayang dengan Jquery dan CSS3 ini dengan url http://bmcyber.blogspot.com/2012/03/membuat-menu-melayang-dengan-jquery-dan.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Membuat menu melayang dengan Jquery dan CSS3 ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Membuat menu melayang dengan Jquery dan CSS3 sebagai sumbernya.