WordPress 3.2.1がリリースされてますね。3.2からIE6非対応とのことなのでまだインストールすらしてませんが、そのうち試そう。

今日はスマホで活躍の場がありそうなタブメニューをjQueryで作成してみます。

スマホ対応ページを作成する場合、PCページをそのまま移植しようとするとやたらにページが長くなってしまう場合があります。そんなときはタブメニューを使って、ちょちょいとコンテンツをまとめてみましょう。

jQueryで簡単タブメニュー サンプル

まずは簡単にHTMLから説明。HTML側にはjQueryで処理しやすいように、タブとコンテンツにidを割り当てます。idは処理しやすくするため「tab_1」「content_1」と文字と数字のセパレータに「_」を入れ、数字が同じものが対になるように割り当てています。

<div class="tabarea">  
<ul class="tabs">  
<li id="tab_1" class="selected">メニュー１</li>  
<li id="tab_2">メニュー２</li>  
<li id="tab_3">メニュー３</li>  
</ul>  
<div id="content_1" class="content">『メニュー１』のコンテンツです。</div>  
<div id="content_2" class="content">『メニュー２』のコンテンツです。</div>  
<div id="content_3" class="content">『メニュー３』のコンテンツです。</div>  
</div>

つぎにCSS。リストを簡単に横並びにできるように「display: box;」を使っています。box非対応ブラウザの表示くずれを避けたい場合は「float: left;」等を使って調整を。

.tabarea {
	background: #000;
}
ul.tabs {  
	display: box;
	display: -webkit-box;
	display: -moz-box;
	margin:0px;
	padding:0px;
	background: #000;
}
ul.tabs li {  
	list-style:none;
	padding: 20px;
	border: 1px solid #000;  
	border-bottom: 0;
	color: #fff;
}
div.content {
	padding: 20px;
	border: 1px solid #000;  
	border-top: 0;
	background: #fff;
}
.tabarea .selected {
	background: #fff;
	color: #000;
}
#content_2, #content_3 {
	display: none;
} 

最後にjQuery。HTML側で割り当てたタブのidの数字部分取得して、数字の一致するコンテンツのみ表示させる、という処理をしています。

$(function(){
	$(".tabarea .tabs li").click(function(){
		var tab = $(this).attr("id"); //クリックされたタブのidを取得
		var num = tab.split("_"); //セパレータで分割
		var con = "#content_" + num[1]; //表示させるコンテンツのid名を生成
		$(this).addClass("selected"); //クリックされたタブのclassにselectedを割り当て
		$(".tabarea li:not(#"+tab+")").removeClass("selected"); //その他のタブのclassにあるselectedを削除
		$(".tabarea div[id^=content]").hide(); //コンテンツをすべて非表示に
		$(".tabarea " + con).show(); //クリックされたタブ対応のコンテンツのみ表示
	});
});

今回のサンプルではHTML側で視覚的にどれが対になっているかわかりやすいようidを割り当てましたが、jQuery側で「.index()」使って要素の順番を取得し、HTML側はいちいちidを記述しなくても動作するようにもできます。

と、こんな感じに、わざわざjQueryプラグインを導入しなくても、ちょこっとjQueryの記述さえわかれば、簡単にタブメニューを導入できます。

jQueryさわったことがないという方も、この機会にぜひお試しあれ。