Smooth Animated Menu


Description: マウスオーバーでストンとキャプションが落ちるメニューを実装するプラグインです。エフェクトが可愛いですね。実装にはjquery.easingが使われています。
Sample: demo
Tutorial: How to Make a Smooth Animated Menu with jQuery
License: -

Sample

Note

$(document).ready(function(){

	//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/

	//Remove outline from links
	$("a").click(function(){
		$(this).blur();
	});

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

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

});

メニューに与えたclass or IDに変更します。

Related snippet :

  • Description: 画像にマウスオーバーするとアニメーションしながら拡大します。サムネイルにインパクトを与えたり、メニューとしても使えそうです。MacのDockライクな ...
  • Description: シンプルにアニメーションするメニュー。簡単なコードで実装することが出来ます。クロスブラウザにも対応しており、ちょっとしたインパクトも与えることができ ...
  • Description: タブをページ推移無しで切り替えるプラグインです。切替時にも、縦にスライドするアニメーションが施されています。サイドバーなどで重宝しそう。 ...
  • Description: マウスを乗せると縦スライドして色が切り替わるメニュー。テキストメニューをスタイリッシュに見せることができるのでSEOも考慮しているサイトにも使えそう ...
  • Description: マウスを追従するプルダウン形式のメニューとスクロールトップのリンクを実装するプラグインです。使い方次第ではユーザビリティにも自己満足にもなり得ますの ...
  • Description: スクロールに応じてアニメーションでサイドメニュー部分のみ追従してきます。IE6でも動作してくれるので、position:fixed;の替わりに使うの ...
  • Description: アニメーションしながら縦に開閉するアコーディオン式のパネルです。弾むようなエフェクトが可愛いですね。他のパネルを開くと元々開いていたパネルは閉じられ ...