華麗なタブメニュー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年9月16日 00:00
