CSSとJavascriptでタブメニューを作る

CSSとJavascriptでタブメニューを作る

~CSSとJavascriptでフェードイン、フェードアウトしながら切り替わるタブメニューを作る


mamtab.js(6KB)ダウンロード

■使い方

■使用例

標準色

タブ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>




Mam's WebSite