<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Flashで作ったようなクールなメニューを実現する「Nice "Flashy" menu with Jquery」サンプル</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all"/>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.delay.js"></script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
<script>
$(document).ready(function() {
$("#menu, #white_line").css("opacity","0");
$("#menu").stop().animate({
opacity: 0.9,
marginLeft: '50px'
}, 2400, 'easeInSine');
$('#white_line').stop().animate(
{opacity: 0.7},
{duration:2400,easing: 'easeInSine'
})
$('#menu span').mouseenter(function(element) {
$("#menu ul li").css("opacity","1");
$('#white_line').stop().animate(
{top: 40, height:290},
{duration:500,easing: 'easeOutBack'}
)
$("#menu ul li").eachDelay(function(){
$(this).stop().animate({
opacity: 1,
marginLeft: '0px',
backgroundPosition: "150px 0px"
}, 600, 'easeOutBack');
}, 30);
});
$('#menu').mouseleave(function(element) {
$("#menu ul li").eachDelay(function(index){
$(this).stop().animate({
opacity: 0,
marginLeft: '-200px',
backgroundPosition: "150px 0px"
}, 600, 'linear');
if(index == $("#menu ul li").size() -1){
$('#white_line').stop().animate(
{top: 79, height:1},
{duration:600,easing: 'easeInBack'
})
}
}, 30);
});
$('#menu ul li').mouseenter(function(element) {
$('#menu ul li').not(this).stop().animate({
backgroundPosition: "150px 0px",
opacity: '0.5'
}, 500, 'linear');
$(this).stop().animate({
backgroundPosition: "300px 0px",
opacity: '1'
}, 600, 'easeOutBounce');
$(this).find('a').css("color","#916153");
});
$('#menu ul li').mouseleave(function(element) {
$(this).stop().animate({
backgroundPosition: "150px 0px",
opacity: '1'
}, 200, 'linear');
$(this).find('a').css("color","#000");
});
});
</script>
</head>
<body >
<div id="bg"><img src="images/bg.jpg" width="100%"/></div>
<div id="white_line"></div>
<div id="menu">
<span></span>
<ul>
<li class="item1"><a href="#">New Arrivals</a></li>
<li class="item2"><a href="#">Information</a></li>
<li class="item3"><a href="#">Dinner</a></li>
<li class="item4"><a href="#">Lunch</a></li>
<li class="item5"><a href="#">Cafe</a></li>
<li class="item6"><a href="#">Wine </a></li>
<li class="item7"><a href="#">Wedding</a></li>
<li class="item8"><a href="#">Access</a></li>
<li class="item9"><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
Leave a Reply