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

マウスオーバーでもタブメニューを開閉できるJavaScript「SkiyoTabs」

｜ ｜ ｜ ｜ ｜ ｜ ｜

タブはITリテラシーの低いユーザーにとって、ただの飾りに見えることもあるようです。
こういう視点から見ると、タブメニューはクリック時だけでなく、マウスオーバー時にも切り替わるとよいのかもしれません。
SkiyoTabsは簡単にマウスオーバーも可能にしてくれるJavaScriptです。

使用方法
SkiyoTabsからjquery.skiyotabs.jsをjQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.skiyotabs.js"></script>
<script>
$(function(){
$('#id名').SkiyoTabs({
className:'select', //選択されているときのclassです。
eventName:'mouseover' //イベント処理（clickでクリック時になります）
});
});
</script>

あとはタブ部分を記述します。
<div id="id名">
<ul>
<li><a href="#tab1">タブ1</a></li>
<li><a href="#tab2">タブ2</a></li>
<li><a href="#tab3">タブ3</a></li>
</ul>
<div id="tab1" class="tabmain">コンテンツ1</div>
<div id="tab2" class="tabmain">コンテンツ2</div>
<div id="tab3" class="tabmain">コンテンツ3</div>
</div>

上記のようにタブで指定したhrefとコンテンツのid名を一緒にしてください。
あとはCSSで微調整を行えば完成です。
例）
ul {list-style:none;}
ul li { float: left;}
ul li.select {background-color:#000;}
.tabmain {width:500px;height:100px;clear:both;}

マウスオーバーでもタブメニューを開閉できるJavaScript「SkiyoTabs」サンプル

記事作成：2009年03月16日

前の記事：株価の表示みたいなニュースティッカーJavaScript「jStockTicker plugin」
次の記事：jQueryでタブメニューを作る（プラグインなし）