簡単設置のフェードイン、フェードアウトで切り替わるタブメニューのデザイン

～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>