CSSとJavascriptでタブメニューを作る
~CSSとJavascriptでフェードイン、フェードアウトしながら切り替わるタブメニューを作る
タブ1
タブ2
タブ3
タブ4
タブ5
タブ6
タブ1内容
タブ2内容
タブ3内容
タブ4内容
タブ5内容
タブ6内容
ソースコード
<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>タブ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>