jQueryを使った滑らかにアニメーションするナビゲーション[js]

設置方法は、ダウンロードをして、下記のようにanimated-menu.jsとanimated-menu.cssを設置してと画像ファイルをアップロードするだけです。

<script src="js/jquery.js" type="text/javascript"></script>
<script src="animated-menu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/animated-menu.css" />

HTMLマークアップ例

<ul>
<li class="green">  
  <p><a href="#">Home</a></p>  
  <p class="subtext">The front page</p>  
</li>  
<li class="yellow">  
  <p><a href="#">About</a></p>  
  <p class="subtext">More info</p>  
</li>  
<li class="red">  
  <p><a href="#">Contact</a></p>  
  <p class="subtext">Get in touch</p>  
</li>  
<li class="blue">  
  <p><a href="#">Submit</a></p>  
  <p class="subtext">Send us your stuff!</p>  
</li>  
<li class="purple">  
  <p><a href="#">Terms</a></p>  
  <p class="subtext">Legal things</p>  
</li>  
</ul>  

JavaScript

$(document).ready(function(){  

//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

//When mouse is removed
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

});

Tweet Check