Moving Tab and Sliding Content


Description: タブメニューにマウスを乗せるだけでコンテンツを切り替えます。IE6だけ表示が崩れるので対策が必要です。使い勝手はとても良いのでうまく使っていきたいですね。
Sample: demo
Tutorial: jQuery Moving Tab and Sliding Content Tutorial
License: -

Sample

Note

$(document).ready(function () {

		//set the default location (fix ie 6 issue)
		$('.lava').css({left:$('span.item:first').position()['left']});

		$('.item').mouseover(function () {
			//scroll the lava to current item position
			$('.lava').stop().animate({left:$(this).position()['left']}, {duration:200});

			//scroll the panel to the correct content
			$('.panel').stop().animate({left:$(this).position()['left'] * (-3)}, {duration:200});
		});

	});

jQueryと上記コードで動作します。タブの数によって調整してください

Related snippet :

  • Description: スライドするタブメニューです。条件分岐でIE用のcssを用意してクロスブラウザ対応させています。少しリッチなUIにしたい、という時にこうしたエフェク ...
  • Description: マウスオーバーで四方に画像が分かれ、別のコンテンツが表示される、というもの。マウスを離すと自動で戻りますが、その時のアニメーションエフェクトにも工夫 ...
  • Description: クールなエフェクトのフライアウトメニューです。css3も併用しています。要jquery.easingです。 Sample: demo ...
  • Description: サムネイルに応じて画像がスライドします。ナビゲーションも一緒にスライドするのは印象的でいいですね。動作も軽快で汎用性がありそうです。コードも軽量でc ...
  • Description: バー全体が降りてくるタイプのドロップダウンメニューです。横並びに羅列されるので、下部コンテンツを邪魔することもありません。クロスブラウザで動作します ...
  • Description: 省スペースで多くのコンテンツを見ることが出来るコンパクトニュースビューアを実装出来るプラグインです。css3を利用しているのでデモと同じように実装す ...
  • Description: メニュー項目にマウスを合わせるとラインがアニメーションしながら付いてきます。ラインはテキストの長さに応じて自動で調節されますのでテキストメニューに色 ...