Door Menu with Jquery
Door ပံုစံ Menu တခုတည္ေဆာက္ဖုိ႕အတြက္ အရင္ဆံုး Photoshop နဲ႕ Width: 800px, height: 101px .jpg တခုကိုတည္ေဆာက္ပါ။ၿပီးလ်င္ shutter နဲ႔ window အတခုစီအတြက္ Width: 200px, height: 100px ဆီရွိတဲ့ .jpg တခုစီတည္ေဆာက္ပါ။ အားလံုးၿပီးသြားရင္ Html နဲ႕ coding ေရးပါမယ္။
ဒါကေတာ့ Html code ပါ။
<html>
<head>
<title>Door Menu Using Jquery</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<ul id=”menu”>
<li class=”shutter” id=”shutter1″><a class=”link” href=”#”>Shutter 1</a></li>
<li class=”shutter” id=”shutter2″><a class=”link” href=”#”>Shutter 2</a></li>
<li class=”shutter” id=”shutter3″><a class=”link” href=”#”>Shutter 3</a></li>
<li class=”shutter” id=”shutter4″><a class=”link” href=”#”>Shutter 4</a></li>
</ul>
</body>
</html>
ဒါကေတာ့ CSS code ။
* { margin:0px; padding:0px; }
body { background: #ffff; }
a { outline-style: none; }
ul#menu {
margin: 50px auto;
list-style: none;
background: url(../images/menu-bg.jpg);
width: 800px;
overflow: auto;
}
ul#menu li.shutter {
width: 200px;
height: 100px;
display: block;
float: left;
}
ul#menu li#shutter1 {
background: url(../images/pooh.jpg) no-repeat;
}
ul#menu li#shutter2 {
background: url(../images/pooh.jpg) no-repeat;
}
ul#menu li#shutter3 {
background: url(../images/pooh.jpg) no-repeat;
}
ul#menu li#shutter4 {
background: url(../images/pooh.jpg) no-repeat;
}
a.link {
width: 200px;
height: 100px;
display: block;
background: url(../images/window.png) no-repeat bottom center;
text-indent: -9999px;
}
ၿပီးရင္ေတာ့ shutter animation အလုပ္လုပ္ဖို႔အတြက္ Jquery ကိုေရးပါမယ္။
<script type=”text/javascript” src=”js/jquery-1.2.6.min.js”></script>
<script type=”text/javascript” src=”js/jquery.backgroundPosition.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
//Set css in Firefox (Required to use the backgroundPosition js)
$(’#shutter1′).css({backgroundPosition: ‘0px 0px’});
$(’#shutter2′).css({backgroundPosition: ‘0px 0px’});
$(’#shutter3′).css({backgroundPosition: ‘0px 0px’});
$(’#shutter4′).css({backgroundPosition: ‘0px 0px’});
//Animate the shutter
$(”.link”).hover(function(){
$(this).parent().animate({backgroundPosition: ‘(0px -100px)’}, 500 );
}, function() {
$(this).parent().animate({backgroundPosition: ‘(0px 0px)’}, 500 );
});
});
</script>
အားလံုးအၿပည့္အစံုကေတာ့ ဒီမွာ စမ္းၾကည့္ႏိုင္ပါတယ္။
