jQueryで簡単タブメニューを自作する
WordPress 3.2.1がリリースされてますね。3.2からIE6非対応とのことなのでまだインストールすらしてませんが、そのうち試そう。
今日はスマホで活躍の場がありそうなタブメニューをjQueryで作成してみます。
スマホ対応ページを作成する場合、PCページをそのまま移植しようとするとやたらにページが長くなってしまう場合があります。そんなときはタブメニューを使って、ちょちょいとコンテンツをまとめてみましょう。
まずは簡単に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さわったことがないという方も、この機会にぜひお試しあれ。