CSSとJavascriptでフェードイン、フェードアウト切り替えタブメニュー
CSSだけで作るタブメニューは手軽ですが、フェードアニメーションや柔軟な構造制御を実現するにはJavaScriptの力が必要です。
このページでは、フェードイン・アウトによるスムーズな切り替えを含むタブメニューの実装を紹介します。
シンプルな構造ながら、拡張性と実用性を兼ね備えたコード例を掲載しています。
mamtab.js(6KB)ダウンロード
■使い方
上記ボタンを押してmamtab.jsをダウンロードします。
mamcalendarを使いたいファイルで、
<script src="./js/mamtab.js"></script>
のように、相対又は絶対パスでmamtab.jsを指定します。
タブのコンテンツの高さは300px固定に設定されていますので、高さを変更したい場合は、
mamtab.jsの3行目
this.tabContentHeight="300px";//タブのコンテンツ部分の高さ指定を変更してください。
タブを使用する箇所で以下のようにHTMLを記述します
<div class="mamTab">
<div>
<div>タブ１</div>
<div>タブ２</div>
</div>
<div>
<div>
タブ１内容
</div>
<div>
タブ２内容
</div>
</div>
</div>
■使用例
標準色
タブ１
タブ２
タブ３
タブ４
タブ５
タブ６
タブ１内容
タブ２内容
タブ３内容
タブ４内容
タブ５内容
タブ６内容
淡い色
タブ１
タブ２
タブ３
タブ４
タブ５
タブ６
タブ１内容
タブ２内容
タブ３内容
タブ４内容
タブ５内容
タブ６内容
モノクロ色
タブ１
タブ２
タブ３
タブ４
タブ５
タブ６
タブ１内容
タブ２内容
タブ３内容
タブ４内容
タブ５内容
タブ６内容
■ソース
<script src="./js/mamtab.js"></script>
<h4>標準色</h4>
<div class="mamTab">
<div>
<div>タブ１</div>
<div>タブ２</div>
<div>タブ３</div>
<div>タブ４</div>
<div>タブ５</div>
<div>タブ６</div>
</div>
<div>
<div>
タブ１内容
</div>
<div>
タブ２内容
</div>
<div>
タブ３内容
</div>
<div>
タブ４内容
</div>
<div>
タブ５内容
</div>
<div>
タブ６内容
</div>
</div>
</div>
<h4>淡い色</h4>
<div class="mamTab mamTabPale">
<div>
<div>タブ１</div>
<div>タブ２</div>
<div>タブ３</div>
<div>タブ４</div>
<div>タブ５</div>
<div>タブ６</div>
</div>
<div>
<div>
タブ１内容
</div>
<div>
タブ２内容
</div>
<div>
タブ３内容
</div>
<div>
タブ４内容
</div>
<div>
タブ５内容
</div>
<div>
タブ６内容
</div>
</div>
</div>
<h4>モノクロ色</h4>
<div class="mamTab mamTabMono">
<div>
<div>タブ１</div>
<div>タブ２</div>
<div>タブ３</div>
<div>タブ４</div>
<div>タブ５</div>
<div>タブ６</div>
</div>
<div>
<div>
タブ１内容
</div>
<div>
タブ２内容
</div>
<div>
タブ３内容
</div>
<div>
タブ４内容
</div>
<div>
タブ５内容
</div>
<div>
タブ６内容
</div>
</div>
</div>