Rolling Rounded Menu


Description: マウスを乗せるとアイコンが回転しながら開き、コンテンツを表示するメニューを実装します。IEでは回転はしませんが、開閉は可能です。
Sample: demo
Tutorial: Rocking and Rolling Rounded Menu with jQuery
License: -

Note

$('.item').hover(
	function(){
		var $this = $(this);
		expand($this);
	},
	function(){
		var $this = $(this);
		collapse($this);
	}
);
function expand($elem){
	var angle = 0;
	var t = setInterval(function () {
		if(angle == 1440){
			clearInterval(t);
			return;
		}
		angle += 40;
		$('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
	},10);
	$elem.stop().animate({width:'268px'}, 1000)
	.find('.item_content').fadeIn(400,function(){
		$(this).find('p').stop(true,true).fadeIn(600);
	});
}
function collapse($elem){
	var angle = 1440;
	var t = setInterval(function () {
		if(angle == 0){
			clearInterval(t);
			return;
		}
		angle -= 40;
		$('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
	},10);
	$elem.stop().animate({width:'52px'}, 1000)
	.find('.item_content').stop(true,true).fadeOut()
          .find('p').stop(true,true).fadeOut();
}

jQueryとプラグインを読み込んで上記設定をします。

Related snippet :

  • Description: クールなエフェクトのフライアウトメニューです。css3も併用しています。要jquery.easingです。 Sample: demo ...
  • Description: エレガントなアコーディオンメニュー。マウスオーバーでアニメーションスライドし、テキストがフェードインします。css3を併用していますので対応ブラウザ ...
  • Description: マウスオーバーで可愛いアイコンが降り、離すと裏から戻る、というアニメーションのグローバルメニューです。ユニークでインパクト有ります。 Sa ...
  • Description: 画像にマウスオーバーするとアニメーションしながら拡大します。サムネイルにインパクトを与えたり、メニューとしても使えそうです。MacのDockライクな ...
  • Description: シンプルにアニメーションするメニュー。簡単なコードで実装することが出来ます。クロスブラウザにも対応しており、ちょっとしたインパクトも与えることができ ...
  • Description: マウスオーバーで四方に画像が分かれ、別のコンテンツが表示される、というもの。マウスを離すと自動で戻りますが、その時のアニメーションエフェクトにも工夫 ...
  • Description: マウスを乗せると縦スライドして色が切り替わるメニュー。テキストメニューをスタイリッシュに見せることができるのでSEOも考慮しているサイトにも使えそう ...