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

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

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

sponsors

「華麗なタブメニューjavascript「Fancy Sliding Tab Menu」」をシェアする

記事作成:
記事URL:

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