Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



BINA "SLEEK ANIMATED MENU"
August 7, 2009
Posted by: Fauzie


Menu yang ditunjukkan dalam rencana ini adalah menu yang menggunakan jQuery dan juga CSS. Asalnya adalah menu yang telah dibina dengan menggunakan mootools tetapi telah diubah oleh Roshan, seorang web designer, dengan menambah script jQuery dan kod CSS. Dan produk yang dihasilkan sungguh menarik. Anda boleh klik di sini untuk melihat "Live Demo" yang telah saya sediakan.

Semua kod yang digunakan berdasarkan kepada kod-kod CSS dan HTML yang dibangunkan oleh Roshan. Bezanya, saya telah menggunakan blogger untuk tujuan ini.



Bagi mendapatkan background hover, Roshan telah menggunakan dua image seperti berikut. Image-image telah pun saya upload ke photobucket bagi mendapatkan URL. Anda boleh menggunakan URL image ini jika berminat untuk meletakkan menu ini dalam blog.




Image di atas ialah bg-right.png dan yang bawah ialah bg.png. Kod-kod CSS dan HTML serta script JQuery adalah seperti di bawah ini:

<html>
</head>
<style type="text/css">
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>