Alhamdulillah, setelah nyari kasak-kusuk ke sana kemari, akhirnya saya dapet juga nih cara bagaimana bisa nampilin menu melayang dengan menggunakan jQuery.
Sempet stress juga karena ga nemu-nemu (maklum di google.co.id banyak yang nampilin situs spam).
Tapi akhirnya nemu di salah satu blog yg templatenya mirip banget sama template saya... (kok bisa sama gitu ya templatenya, pasti sama-sama dari Kang Choen... )
1. Masukin script jQuery ini dibawah </head>
2. Copy paste kode css berikut,
Taruh kode css tersebut sebelum ]]></b:skin>
3. Copy javascript ini persis di bawah kode jQuery yang tadi
4. Taruh kode HTML ini pas dibawah <body>
¤ Untuk tulisan yang berwarna biru, dapat diganti dengan link blog sobat
Ok, sekian dulu sedikit tips dari Ibra... untuk yang koneksi nya lemod sama kurang jelas bacanya, silahkan ambil script jadinya di sini.
Thanks for Kang Guireno, atas sedikit sumbangan ilmunya
Sempet stress juga karena ga nemu-nemu (maklum di google.co.id banyak yang nampilin situs spam).
Tapi akhirnya nemu di salah satu blog yg templatenya mirip banget sama template saya... (kok bisa sama gitu ya templatenya, pasti sama-sama dari Kang Choen... )
1. Masukin script jQuery 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. Copy paste kode css berikut,
#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;
¤ Mungkin css nya masih jelek banget, edit lagi aja sesuai selera sobat bloggerTaruh kode css tersebut sebelum ]]></b:skin>
3. Copy javascript ini persis di bawah kode jQuery yang 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> ¤ duration:1500, merupakan seberapa cepat effect floating, Semakin banyak durationnya, maka semakin lambat pula effect floatingnya (atur sendiri sesuai selera ya Sob..) 4. Taruh kode HTML ini pas dibawah <body>
<div id='floatMenu'> <ul class='menu1'> <li><a href='http://aa-iebra.blogspot.com/'> Beranda </a></li> </ul> <ul class='menu2'> <li><a href='http://aa-iebra.blogspot.com/'> Tentang Saya </a></li> <li><a href='http://aa-iebra.blogspot.com/'> Kontak </a></li> <li><a href='http://aa-iebra.blogspot.com/'> Protofolio </a></li> </ul> </div>
¤ Untuk tulisan yang berwarna biru, dapat diganti dengan link blog sobat
Ok, sekian dulu sedikit tips dari Ibra... untuk yang koneksi nya lemod sama kurang jelas bacanya, silahkan ambil script jadinya di sini.
Thanks for Kang Guireno, atas sedikit sumbangan ilmunya
1 comments:
terimakasih atas penjelasannya
Post a Comment and Don't Spam!