Posted by : Gumi Gumi
13 Des 2010
Apa kabar sobat?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.contoh'a bisa sobat lihat disini mau tau cara'a?lets go...
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 </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..
selamat mencoba sob,dan jangan lupa tinggalkan komentarnya n_n
{ 14 comments... read them below or Comment }
"Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"
"Sorry your comment will not be replied, because this blog has been inactive. Thank you"
Langganan:
Posting Komentar (Atom)
Hmmm...spertinya menarik nih bro...persis mirip sama punyanya kang Salman kan?? btw apa ini gak bikin berat blog ya gan?? soalnya setahuku CSS3 atau JQuery itu meningkatkan berat blog dan ujung2nya ntar tambah berat...tapi bagus juga bro buat dijadikan referensi...thanks ya, Salam blogger manajubelz
BalasHapusyang ini beda bro...
BalasHapusmemang sih kalau terlalu banyak menggunakan jquery bisa berat,tapi di usahakan untuk tidak terlalu menggunakan banyak script jquery,blog ga akan berat n_n
kk Jhohanes Boleh Nanya Gak Yg Di bawah Ini TAROK dIMANA!? pLS bALAS kK
Hapus#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;}
Itu diatas kode ]]>
Hapusberhasil gan..
BalasHapusthanks ya ilmunya
nice info^^
BoLeh Di Cobain yg ini...???
BalasHapusSilakan gan,monggo n_n
BalasHapuskeren banget..................
BalasHapustutorialnya lengkap gan..
BalasHapuskalo di pake ke wordpress bisa juga nggak Om Jhon :D
BalasHapusklo wordpress saya pikir bisa kq.
BalasHapusyang paling atas di taruhh dimana gan ????
BalasHapuskode SCC di tarok template ?
BalasHapusmatsudnya gan, tolong di perjelas lagi
thanks
scriptnya saya bungkus dulu gan, ntar dilanjut lagi...!
BalasHapus