DEMO : http://jquery-l.blogspot.com/
maaf agan sekalian lagi lagi karena mw maghrib dan ane mw sholat jadi langsung saja
masuk blogger - rancangan -edit HTML
step 1 : letakkan kode di bawah ini di bawah <head>
<script language="javascript" src="http://longfield22.googlecode.com/files/jquery_mini.js"></script>
<script language="javascript" src="http://longfield22.googlecode.com/files/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>
<link href="http://longfield22.googlecode.com/files/reset.css" rel="stylesheet" type="text/css" />
<link href="http://longfield22.googlecode.com/files/page.css" rel="stylesheet" type="text/css" />
Step 2 : letakkan kode berikut di eh,mksdnya mgkn body anda harus sedikit di rombak (harus teliti) atau pilihan lain anda bisa meletakkannya di atas ]]></b:skin> (gunakan ctrl+F untuk mencari kode tersebut
body {
background-color:#000;
height:2000px;
color:#ccc;
font:10px "Lucida Grande", "Lucida Sans", "Trebuchet MS", verdana, sans-serif;
}
#floatMenu {
position:absolute;
top:150px;
left:50%;
margin-left:235px;
width:200px;
}
#floatMenu ul {
margin-bottom:20px;
}
#floatMenu ul li a {
display:block;
border:1px solid #999;
background-color:#222;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
}
#floatMenu ul li a:hover {
color:#fff;
background-color:#333333;
}
#floatMenu ul.menu1 li a:hover {
border-color:#09f;
}
#floatMenu ul.menu2 li a:hover {
border-color:#9f0;
}
#floatMenu ul.menu3 li a:hover {
border-color:#f09;
}
step 3 : letakkan kode di bawah ini di bawah <body>
<div id="page-wrap">
<div id="header">
<h2> Longfield Floating menu</h2>
<h1>jQuery&CSS</h1>
</div>
<div id="content">
</div>
</div>
<div id="floatMenu">
<ul class="menu1">
<li><a href="#" onclick="return false;"> Home </a></li>
</ul>
<ul class="menu2">
<li><a href="#" onclick="return false;"> category </a></li>
<li><a href="#" onclick="return false;"> forum </a></li>
<li><a href="#" onclick="return false;"> facebook gw </a></li>
</ul>
<ul class="menu3">
<li><a href="#" onclick="return false;"> Technical support </a></li>
</ul>
</div>
step 4 : save dan jika ada div yg kurang pada step tiga silakan di tutup,
selamat mencoba!!!
Subscribe to:
Post Comments (Atom)
0 komentar:
Post a Comment