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>タブ1</div>
    <div>タブ2</div>
  </div>
  <div>
    <div>
      タブ1内容
    </div>
    <div>
      タブ2内容
    </div>
  </div>
</div>

■使用例

標準色

タブ1
タブ2
タブ3
タブ4
タブ5
タブ6
タブ1内容
タブ2内容
タブ3内容
タブ4内容
タブ5内容
タブ6内容

淡い色

タブ1
タブ2
タブ3
タブ4
タブ5
タブ6
タブ1内容
タブ2内容
タブ3内容
タブ4内容
タブ5内容
タブ6内容

モノクロ色

タブ1
タブ2
タブ3
タブ4
タブ5
タブ6
タブ1内容
タブ2内容
タブ3内容
タブ4内容
タブ5内容
タブ6内容

■ソース

<script src="./js/mamtab.js"></script>
<h4>標準色</h4>
<div class="mamTab">
  <div>
    <div>タブ1</div>
    <div>タブ2</div>
    <div>タブ3</div>
    <div>タブ4</div>
    <div>タブ5</div>
    <div>タブ6</div>
  </div>
  <div>
    <div>
      タブ1内容
    </div>
    <div>
      タブ2内容
    </div>
    <div>
      タブ3内容
    </div>
    <div>
      タブ4内容
    </div>
    <div>
      タブ5内容
    </div>
    <div>
      タブ6内容
    </div>
  </div>
</div>

<h4>淡い色</h4>
<div class="mamTab mamTabPale">
  <div>
    <div>タブ1</div>
    <div>タブ2</div>
    <div>タブ3</div>
    <div>タブ4</div>
    <div>タブ5</div>
    <div>タブ6</div>
  </div>
  <div>
    <div>
      タブ1内容
    </div>
    <div>
      タブ2内容
    </div>
    <div>
      タブ3内容
    </div>
    <div>
      タブ4内容
    </div>
    <div>
      タブ5内容
    </div>
    <div>
      タブ6内容
    </div>
  </div>
</div>

<h4>モノクロ色</h4>
<div class="mamTab mamTabMono">
  <div>
    <div>タブ1</div>
    <div>タブ2</div>
    <div>タブ3</div>
    <div>タブ4</div>
    <div>タブ5</div>
    <div>タブ6</div>
  </div>
  <div>
    <div>
      タブ1内容
    </div>
    <div>
      タブ2内容
    </div>
    <div>
      タブ3内容
    </div>
    <div>
      タブ4内容
    </div>
    <div>
      タブ5内容
    </div>
    <div>
      タブ6内容
    </div>
  </div>
</div>