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

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

sponsors

使用方法

Fancy Sliding Tab Menuからtabslide.jsprototypeからporotype.js、script.aculo.usからeffects.jsをダウンロードします。
なおサンプルのCSSで使用している画像はこちらからダウンロードしてください。
aston.jpgtab-left-active.giftab-left.giftab-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.

sponsors

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