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

• ホーム
• Javascript CSS講座
• CSSとJavascriptでタブメニューを作る

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>

Mam's WebSite