TabTab.js

タブ・メニューを実装する際の選択肢の１つとして、気持ちいいアニメーションで切り替わる［TabTab.js］をお勧めします。

メニュー部分をクリックするとクルッと回転するようなエフェクトでコンテンツ部分が切り替わっていきます。
文章の説明だけではイメージしづらいかと思いますので、まずはサンプルをご覧ください。

TabTab.js：実装サンプル

アニメーション処理を高速化させるjQueryプラグイン［Velocity.js］との併用によって、動作が遅くなったりチラついたりすることもなく、スムーズな動きが実現しています。
導入方法は以下。

［TabTab.js］の実装方法

まずは必要なファイルを入手します。
前述の通り、今回は［TabTab.js］の他に［Velocity.js］も使うことになります。
他に［jQuery.js］も忘れないように。
それぞれ下記のURLよりダウンロードしてきましょう。

上記サイトよりダウンロードした３つのJavaScriptのファイルをHTMLの任意の箇所で読み込みます。
このとき必ず［jquery.js］を最初に読み込んでください。
こうしないとjQueryプラグインが動きません。

<script src="../js/jquery.js"></script>
<script src="../js/velocity.js"></script>
<script src="../js/tabtab.js"></script>

さらに続けて、［TabTab.js］の初期設定も記述しておきましょう。

<script>
$(function(){
	$('.tabs').tabtab();
});
</script>

HTMLマークアップ

メインのタブの部分は次のように作りこんでいきます。

<div class="tabs">

<ul class="tabs__menu">
	<li><a href="#">メニュー１</a></li>
	<li><a href="#">メニュー２</a></li>
	<li><a href="#">メニュー３</a></li>
	<li><a href="#">メニュー４</a></li>
</ul>

<div class="tabs__content">
	<div class="tabs-item">
		コンテンツ１   
	</div>
	<div class="tabs-item">
		コンテンツ２
	</div>
	<div class="tabs-item">
		コンテンツ３
	</div>
	<div class="tabs-item">
		コンテンツ４
	</div>
</div>

</div>

まず、外側の大枠を<div class="tabs"> 〜 </div>で囲みます。
初期設定ではこの「class="tabs"」要素に対して［TabTab.js］が効いてきます。

続いてメニュー部分はclass="tabs__menu"で、コンテンツ部分はclass="tabs__content"で、それぞれマークアップします。

基本的にはココまでの設定でタブ・メニューが機能します。

なおデザインはすべてスタイルシートで設定していくことになります。
CSSは同梱されていないのでゼロから作ることになりますが、タブのデザイン程度なら数分で作れるかと思います。

オプション設定

最後に［TabTab.js］のオプション設定について。

スライドの切り替え速度、イージングの種類、キーボード・コントロール等、思い当たる基礎的な機能はほぼ網羅していますね。
各設定項目の使い方と初期設定の値は以下のようになっています。

$('.tabs').tabtab({
	tabMenu: '.tabs__menu',             // メニュー部の要素を指定
	tabContent: '.tabs__content',       // コンテンツ部分の要素を指定
	next: '.tabs-controls__next',       // 次のスライドへ進むトリガー要素を指定
	prev: '.tabs-controls__prev',       // 前のスライドへ戻るトリガー要素を指定

	startSlide: 1,                      // ページをロードした時点でのスタートのタブ
	arrows: true,                       // キーボード・コントロール
	dynamicHeight: true,                // タブの高さを自動で調節
	useAnimations: true,                // アニメーション処理の有効化・無効化

	easing: 'ease',                     // イージングの処理を指定
	speed: 350,                         // アニメーションのスピード
	slideDelay: 0,                      // 遅延スタート
	perspective: 1200,                  // 3D perspective を設定
	transformOrigin: 'center top',      // 3D アニメーションの起点
	perspectiveOrigin: '50% 50%',       // 3D perspective のアングルを指定

	translateY: 0,
	translateX: 0,
	scale: 1,
	rotateX: 90,
	rotateY: 0,
	skewY: 0,
	skewX: 0,
});

「translateY」〜「skewX」の箇所はCSS3の同プロパティに依存しています。

またイージング（easing）の指定は［velocity.js］が司っています。
詳しくは下記サイトを参照してください。

Velocity.js 「Option: Easing」：http://julian.com/research/velocity/#easing

これまでjQueryベースのタブといえば［jQuery UI］を使ったものが一般的でした。しかし［jQuery UI］は容量も重く、動作も遅くなりがちなのがデメリット。
その点［TabTab.js］は軽量でサクサク動くので、より使いやすいはず。

ぜひ導入してみてください。