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

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

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

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

---

ソースコード

<style>
  .mamTab{
    margin:0;
  }
  .mamTab>div:nth-child(1){
    display:flex;
    flex-wrap:wrap-reverse;
    justify-content:flex-start;
    align-items:stretch;
  }
  .mamTab>div:nth-child(1)>div{
    display:inline-block;
    border:1px none #000;
    text-decoration:none;
    color:#000;
    border-radius: 0.5em 0.5em 0 0;
    padding:0.5em;
    cursor:pointer;
    box-shadow: 6px 0px 4px 0px rgba(0,0,0,0.4);
    position:relative;
  }
  .mamTab>div:nth-child(1)>div:active{
    box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
  }
  .mamTab>div>div:nth-of-type(6n+1){background:#EEE;color:#000;}
  .mamTab>div>div:nth-of-type(6n+2){background:#CCC;color:#000;}
  .mamTab>div>div:nth-of-type(6n+3){background:#AAA;color:#000;}
  .mamTab>div>div:nth-of-type(6n+4){background:#888;color:#FFF;}
  .mamTab>div>div:nth-of-type(6n+5){background:#666;color:#FFF;}
  .mamTab>div>div:nth-of-type(6n+0){background:#444;color:#FFF;}

  .mamTab>div:nth-child(2){
    position:relative;
    height:300px;
  }
  .mamTab>div:nth-child(2)>div{
    display:block;
    border:1px none #000;
    text-decoration:none;
    border-radius: 0 0 0 0;
    padding:0.5em;
    height:100%;
    box-shadow: 6px 6px 4px 0px rgba(0,0,0,0.4);
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    opacity:0.0;
    z-index:1000;
  }
  @keyframes mamFadeIn {0%{opacity:0.0;z-index:1100;} 100%{opacity:1.0;z-index:1100;}}
  @keyframes mamFadeOut{0%{opacity:1.0;z-index:1000;} 100%{opacity:0.0;z-index:1000;}} 
</style>

<script>
  var mamTabIndex=0;
  window.addEventListener("load",function(){
    document.querySelector(".mamTab>div:nth-child(2)>div:first-of-type").style.opacity="1.0";
    let elms1=document.querySelectorAll(".mamTab>div:nth-child(1)>div");
    let elms2=document.querySelectorAll(".mamTab>div:nth-child(2)>div");
    for(i=0;i<elms1.length;i++){
      elms1[i].addEventListener("click",function(){
        let n=Array.prototype.indexOf.call(document.querySelectorAll(".mamTab>div:nth-child(1)>div"), this);
        if(mamTabIndex==n){return;}
        let elm1=this.parentNode.parentNode.children[1].children[n];
        let elm2=this.parentNode.parentNode.children[1].children[mamTabIndex];
        //IE対応(IEはanimation一括指定でバグ有)
        elm1.style.animationName="mamFadeIn";
        elm1.style.animationDuration="0.5s";
        elm1.style.animationDelay="0.0s";
        elm1.style.animationFillMode="both";
        elm2.style.animationName="mamFadeOut";
        elm2.style.animationDuration="0.5s";
        elm2.style.animationDelay="0.0s";
        elm2.style.animationFillMode="both";
        mamTabIndex=n;
      });
    }
    //IE対応(IEはanimation一括指定でバグ有)
    elms2[mamTabIndex].style.animationName="mamFadeIn";
    elms2[mamTabIndex].style.animationDuration="0.05s";
    elms2[mamTabIndex].style.animationDelay="0.0s";
    elms2[mamTabIndex].style.animationFillMode="both";
  }); 
</script>


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

Mam's WebSite