Little Boxes Menu


Description: 省スペースでコンテンツが切り替わるボックスメニューです。ページ推移する事無く、そのメニュー項目の詳細を表示させます。IE6のみ表示が崩れますが、cssの工夫で対応できるかも知れません。easingを使います。
Sample: demo
Tutorial: Little Boxes Menu with jQuery
License: -

Sample

Note

$(function() {
	/* object to save the initial positions of each box */
	var divinfo = {"initial": []};
	/* index of the selected / clicked box */
	var current = -1;

	/* we save the index,top and left of each box */
	$('#littleBoxes > div').each(function(){
		var $this = $(this);
		var initial = {
					'index' : $this.index(),
					'top'     : $this.css('top'),
					'left'     : $this.css('left')
		};
		divinfo.initial.push(initial);
	});

	/* click event for the anchors inside of the boxes */
	$('#littleBoxes a').bind('click',function(e){
			var $this         = $(this);
			var $currentBox    = $this.parent();
			/* set a z-index lower than all the other boxes,
			to see the other boxes animation on the top*/
			$currentBox.css('z-index','1');

			/* if we are clicking on an expanded box: */
			if(current == $currentBox.index()){
				/* put it back (decrease width, height,
				and set the top and left back)
				the previous positions are saved in the divinfo obj*/
				$currentBox.stop().animate({
						'top'  : divinfo.initial[$currentBox.index()].top,
						'left' : divinfo.initial[$currentBox.index()].left,
						'width'  : '90px',
						'height' : '90px'
				},800,'easeOutBack').find('.boxcontent').fadeOut();

				$('#littleBoxes > div').not($currentBox).each(function(){
					var $ele         = $(this);
					var elemTop     = divinfo.initial[$ele.index()].top;
					var elemLeft     = divinfo.initial[$ele.index()].left;
					$ele.stop().show().animate({
						'top'         : elemTop,
						'left'        : elemLeft,
						'opacity'    : 1
					},800);
				});
				current = -1;
			}
			/* if we are clicking on a small box : */
			else{
				/* randomly animate all the other boxes.
				Math.floor(Math.random()*601) - 150 creates a random
				number between -150 and 450. This range is considering
				the initial lefts/tops of the elements. It's not the exact
				range, since we would have to calculate the range
				based on each one of the boxes. Anyway, it fits our needs...
				*/
				$('#littleBoxes > div').not($currentBox).each(function(){
					var $ele = $(this);
					$ele.stop().animate({
						'top' : (Math.floor(Math.random()*601) - 150) +'px',
						'left': (Math.floor(Math.random()*601) - 150) +'px',
						'opacity':0
					},800,function(){
						$(this).hide();
					});
				});

				/* expand the clicked one;
				also, fadeIn the content (boxcontent)
				*/
				var newwidth     = 379;
				var newheight     = 379;
				$currentBox.stop().animate({
					'top'     : '0px',
					'left'    : '0px',
					'width' : newwidth +'px',
					'height': newheight+'px'
				},800,'easeOutBack',function(){
					current = $currentBox.index();
					$(this).find('.boxcontent').fadeIn();
				});
			}
			e.preventDefault();
	});
});

プラグインの内容はこんな感じです。

Related snippet :

  • Description: サムネイルに応じて画像がスライドします。ナビゲーションも一緒にスライドするのは印象的でいいですね。動作も軽快で汎用性がありそうです。コードも軽量でc ...
  • Description: メニュー項目にマウスを合わせるとラインがアニメーションしながら付いてきます。ラインはテキストの長さに応じて自動で調節されますのでテキストメニューに色 ...
  • Description: タブメニューにマウスを乗せるだけでコンテンツを切り替えます。IE6だけ表示が崩れるので対策が必要です。使い勝手はとても良いのでうまく使っていきたいで ...
  • Description: 画像にマウスオーバーすると拡大するコード。簡単に実装できて様々なところに応用できそうですね。クロスブラウザで動作してくれます。メニューにも使えるかな ...
  • Description: 背景をアニメーションさせるjQueryプラグインです。テキストを書くことも出来ますし、透過された画像を重ねて表示させる事も可能です。IE6のために、 ...
  • Description: 全画面を使用したグリッドイメージギャラリーです。Flashライクな動きでダイナミックな表現がクールですね。position:fixed;がIE6では ...
  • Description: クールなエフェクトのフライアウトメニューです。css3も併用しています。要jquery.easingです。 Sample: demo ...