8Aug
2009
2009
<html>
</head>
<style type="text/css">
* {
margin:0;
padding:0;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
div.menucontainer {
display:inline;
float:left;
margin-left:150px;
margin-top:70px;
}
ul.nav {
list-style:none;
overflow:hidden;
}
ul.nav li {
float:left;
height:39px;
background-color:#000000;
padding:0 5px;
}
ul.nav li.first {
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}
ul.nav li.last {
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
}
ul.nav li.bg {
margin:7px 0px 0px 3px;
padding-right:8px;
position:absolute;
z-index:50; left:155px;
width:60px;
background:url('http://i425.photobucket.com/albums/pp331/fauzi6009/bg-right.png') no-repeat right top;
}
ul.nav li .left{
background:url('http://i425.photobucket.com/albums/pp331/fauzi6009/bg.png' ) no-repeat left top; height:39px;
}
ul.nav li a {
padding:8px 20px;
color:#ffffff;
font-size:18px;
font-weight:bold;
display:block;
text-decoration:none;
z-index:100; position:relative; }
ul.nav li.ybg {
background-color:#FB0;
position:absolute;
z-index:50; left:165px;
width:55px;
height:4px;
margin-top:6px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script src="jquery.easing.js" type="text/javascript">
</script>
<script type="text/javascript">
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
$(document).ready(function()
{
//for the first menu
$('#nav1 li a').hover(function()
{
var offset=$(this).offset();
var thiswidth =$(this).width()+13;
$('#nav1 li.bg').stop().animate({left:offset.left+"px",width:thiswidth+"px"},600);
},
function()
{
$('#nav1 li.bg').stop().animate({left:"155px",width:"60px"},600);
});
//for the second menu, it uses easing plugin
$('#nav3 li a').hover(function()
{
var offset=$(this).offset();
var thiswidth =$(this).width()+13;
$('#nav3 li.bg').stop().animate({left:offset.left+"px",width:thiswidth+"px"},600);
},
function()
{
$('#nav3 li.bg').stop().animate({left:"155px",width:"60px"},600,'easeOutBounce');
});
//for the third menu, it uses easing plugin
$('#nav2 li a').hover(function()
{
var offset=$(this).offset();
var thiswidth =$(this).width()+13;
$('#nav2 li.ybg').stop().animate({left:offset.left+9+"px",width:thiswidth+"px"},400,function(){
$(this).animate({height:"28px"},150);
});
},
function()
{
$('#nav2 li.ybg').stop().animate({height:"4px"},150,function(){
$(this).animate({left:"165px",width:"55px"},600,'easeOutBounce');
});
});
});
</script>
<body>
<div class="menucontainer" style="margin-top:15px;">
<ul class="nav" id="nav1">
<li class="first"><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Blog</a></li>
<li class="last"><a href="#">Tutorials</a></li>
<li class="bg"><div class="left"></div></li>
</ul>
</div>
</script>
</div>
</body>
</html>
Untuk mencubanya anda copy & paste semua kod di atas ke dalam notepad dan save dalam extension .html kemudian browse dalam dalam Firefox.
Untuk memasukkan kod ke dalam blogger, copy dan paste kod berwarna merah di bahagian bawah <body> Untuk kod berwarna biru, anda masukkan kod-kod ini di bahagian page element (add a gadget)
Dalam contoh ini, kod easOutBounce telah di masukkan untuk mendapatkan "bounce out effect".
No comments:
Post a Comment