skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

JavaScriptでタブメニューを簡単に作る「Semantic Tabs」

｜ ｜ ｜ ｜ ｜ ｜ ｜

よくあるタブメニューをJavaScriptライブラリjQueryで簡単に作成できるSemantic Tabsを紹介します。
※このjQueryプラグインは名の通り文章構造が非常にセマンティックです（後述）。

使用方法
Semantic Tabsからjquery.semantictabs.jsをjQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript" src="jquery.semantictabs.js"></script>
<script type="text/javascript">
$(function(){
$("#id名").semantictabs({
panel:'panel',　//パネルのクラス名
head:'h3', //タブの要素名
active:':first' //最初にアクティブにするタブ
});
});
</script>

次に以下のように記述すれば完成です。
<div id="id名">
<div class="panel（パネルクラス名）">
<h3（タブの要素名）>Tab1</h3>
パネルコンテンツ
</div>
～タブ分記述
</div>

またCSSのサンプルは以下となります。
ul.semtabs {margin:0 auto;clear:both;border-bottom: 4px solid #4c77b3;height:25px;list-style:none !important;}
ul.semtabs li {float:left;height:30px;display:block;margin:0 !important;background-image:none;}
ul.semtabs li a {/* height:15px;*/line-height:15px;display:block;padding: 5px 5em;text-decoration:none;font-weight:bold;background-color:#e6eeee;}
ul.semtabs li.active a {background-color: #4c77b3;color: #fff;}
※セマンティック
多くのタブメニューが以下のような記述をみると、今回のSemantic Tabsの構造がすっきりかつ明解なことがわかります。
<ul><li>Tab1</li><li>Tab2</li><li>Tab3</li></ul>
<div>Panel 1</div>
<div>Panel 2</div>
<div>Panel 3</div>

JavaScriptでタブメニューを簡単に作る「Semantic Tabs」サンプル

記事作成：2009年02月12日

前の記事：ダブルクリックで表示させるメニューを作る「JQuery NavigMenu」
次の記事：jQueryプラグイン「Easy Slider」でスライダーを簡単導入