華麗なタブメニューjavascript「Fancy Sliding Tab Menu」

タブメニューとはその名の通りタブを利用したメニューです。
それゆえ、デザインの種類はあまり多くなく飽きられやすくなります。
Fancy Sliding Tab Menuでは、従来とはひと味変わった華麗なタブメニューを作成できます。

使用方法

Fancy Sliding Tab Menuからtabslide.jsをprototypeからporotype.js、script.aculo.usからeffects.jsをダウンロードします。
なおサンプルのCSSで使用している画像はこちらからダウンロードしてください。
aston.jpg、tab-left-active.gif、tab-left.gif、tab-right.gif

<link rel="stylesheet" href="http://yourdomain/tabslide.css" type="text/css">

<script src="http://yourdomain/prototype.js" type="text/javascript"></script>

<script src="http://yourdomain/effects.js" type="text/javascript"></script>

<script src="http://yourdomain/tabslide.js" type="text/javascript"></script>

次にHTMLを以下のように記述します。

<div id="accordion">

<!-- パネル -->

<div class="panel" id="panel1">

<h3 id="visible">Panel 1</h3>

<div id="panel1-body" class="panel_body">

<div>

コンテンツ

</div>

</div>

</div>

<!-- 以下パネル分（数字を増やす） -->

</div>

<script>init();</script>

他の画像を使用する際はCSSでaccordion部やpanel_body部のwidthをうまく調整してください。

サンプル

Panel 1

This is the contents of this panel.

Panel 2

This is the contents of this panel.

Panel 3

This is the contents of this panel.

Panel 4

This is the contents of this panel.

Panel 5

This is the contents of this panel.

Javascriptサンプルページ一覧

skuare.net