スライドするタブメニューjavascript「Perspective tabs」

タブメニューを採用するケースがあると思いますが、タブの数が多くなると想定の横幅に収まらないときがあります。
Perspective tabsはタブをスライドさせることができ、省スペースで多数のタブを収納できるようになります。

sponsors

使用方法

Perspective tabsからsliding_tabs.jsとsliding_tabs.cssを、mootoolsからmootools.jsをダウンロードします。
<script type="text/javascript" src="http://yourdomain/mootools.js"></script>
<script type="text/javascript" src="http://yourdomain/sliding_tabs.js"></script>
<link rel="stylesheet" href="http://yourdomain/sliding_tabs.css" style type="text/css">
<script type="text/javascript">
function init_sliding_tabs(){
new sliding_tabs($$('.tab'),$$('.tab_body'),{});
}
</script>

さらにbodyにonload="init_sliding_tabs();"を付与した後、タブメニューとコンテンツを以下のように記述します。
<body onload="init_sliding_tabs();">
<div class="tab">MENU1</div>
<div class="tab">MENU2</div>
<div class="tab">MENU3</div>
<div class="tab_body">
コンテンツ
</div>
<div class="tab_body">
コンテンツ
</div>
<div class="tab_body">
コンテンツ
</div>

サンプル

MENU1
MENU2
MENU3
MENU4
MENU5
MENU6
MENU7
MENU8
MENU9
MENU10
Contents1
Contents2
Contents3
Contents4
Contents5
Contents6
Contents7
Contents8
Contents9
Contents10
オプション

sponsors

Javascriptサンプルページ一覧
skuare.net