meisam12
چهارشنبه 15 شهریور 1391, 14:42 عصر
اولین کاری که می کنید پوشه های js , css , images را به پروژه تان اضافه کنید.
دومین کار دستور زیر را در Head قرار بده
<head runat="server">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<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>
</head>
سومین کار نوشت ul می باشد که idاش باید menuback باشد و li درونش که همان منو شما می باشد باید دارای کلاسی به نام shutter باشد به شکل زیر.
<ul id="menuback">
<li class="shutter" id="shutter1"><a class="link" href="#1">Link 1</a></li>
<li class="shutter" id="shutter2"><a class="link" href="#2">Link 2</a></li>
<li class="shutter" id="shutter3"><a class="link" href="#3">Link 3</a></li>
<li class="shutter" id="shutter4"><a class="link" href="#4">Link 4</a></li>
</ul>