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

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

使用方法
Fancy Sliding Tab Menuからtabslide.jsをprototypeからporotype.js、script.acu.lousから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をうまく調整してください。
華麗なタブメニューjavascript「Fancy Sliding Tab Menu」サンプル

2007年09月16日

前の記事：エフェクト満載の画像ギャラリー系javascript「jQuery Cycle Plugin」
次の記事：クールな画像ギャラリーjavascript「jQuery Gallery」

関連記事

• コンテンツをスライド表示するjavascript「glider.js」
• [prototype]Tree.js
• [prototype]Control.Tabs
• [prototype]Simple tabs
• [prototype]prototabs

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」