반응형 탭 스타일 CSS

RWD Tab Style

반응형 탭 스타일에 대해 알아봅니다.

반응형 탭 CSS Ref

마크업 및 CSS 는 다음과 같습니다.

html

<div class="b2b-tabswrap">
    <ul class="b2b-tabs">
        <li class="m1">
            <h3 class="m1"><a href="#">Why choose Samsung Printers?</a></h3>
            <div class="b2b-tabcont">content 1</div>
        </li>
        <li class="m2">
            <h3 ><a href="#">Why choose Samsung Supplies?</a></h3>
            <div class="b2b-tabcont">content 2222</div>
        </li>
        <li class="m3 on">
            <h3><a href="#">Why choose Samsung Solutions?</a></h3>
            <div class="b2b-tabcont">content 333</div>
        </li>
        <li class="m4">
            <h3><a href="#">Why choose Samsung Services?</a></h3>
            <div class="b2b-tabcont">content 444</div>
        </li>
    </ul>
</div>

css

* { margin:0; padding:0 }
.b2b-tabswrap .b2b-tabs {width:100%; height:auto; position:relative; }
.b2b-tabswrap .b2b-tabs li {float:left;display:block;width:100%; }
.b2b-tabswrap .b2b-tabs li h3 {background:gray; position:relative;width:calc(100% - 1px);border-bottom:1px solid #fff; top:0; left:0;padding:12px 0;transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-webkit-transition: all 0.3s ease 0s; }
.b2b-tabswrap .b2b-tabs li h3:hover {background:#4a4a4a; }
.b2b-tabswrap .b2b-tabs li h3 a {display:block;color:#fff;text-align:center;}
.b2b-tabswrap .b2b-tabs .b2b-tabcont { position:relative; width:100%;margin:10px 0;background:red;display:none; }
.b2b-tabswrap .b2b-tabs li.on h3 {background:#4a4a4a;  }
.b2b-tabswrap .b2b-tabs li.on .b2b-tabcont {background:gray;display:block  }
@media (min-width: 64em) {
    .b2b-tabswrap .b2b-tabs li h3 {position:absolute;width: calc( 100%/4 ); border-left:1px solid #fff;}
    .b2b-tabswrap .b2b-tabs li.m1 h3{border:0 none}
    .b2b-tabswrap .b2b-tabs li.m2 h3{ left:25%;}
    .b2b-tabswrap .b2b-tabs li.m3 h3 { left:50%;}
    .b2b-tabswrap .b2b-tabs li.m4 h3 { left:75%;}
    .b2b-tabswrap .b2b-tabs .b2b-tabcont {margin-top:80px;}
}

See the Pen 반응형 기본 탭 CSS by jaeheekim (@jaehee) on CodePen.

Jaehee's WebClub