CSS만으로 탭메뉴를 표현하는 방법

CSS만으로 탭메뉴를 표현하는 방법

CSS만으로 탭메뉴를 표현하는 방법

CSS만으로 탭메뉴를 표현하는 방법이 몇 가지가 있지만, 이번에 소개할 내용은 input태그를 이용한 방법입니다.

데모페이지입니다.

DEMO

HTML

input태그와 label태그를 사용해서 탭을 만듭니다.
input의 id와 lable의 for속성이 대응해, label을 클릭하면 inputchecked속성이 붙습니다.
input의 checked속성을 이용해 요소를 표시/숨김으로 설정합니다.

<!-- TAB CONTROLLERS -->
<input id="panel-1-ctrl" class="panel-radios" type="radio" name="tab-radios" checked>
<input id="panel-2-ctrl" class="panel-radios" type="radio" name="tab-radios">
<input id="panel-3-ctrl" class="panel-radios" type="radio" name="tab-radios">

<!-- TABS LIST -->
<ul id="tabs-list">
    <!-- MENU TOGGLE -->
    <li id="li-for-panel-1">
      <label class="panel-label" for="panel-1-ctrl">Tab1</label>
    </li>
    <li id="li-for-panel-2">
      <label class="panel-label" for="panel-2-ctrl">Tab2</label>
    </li>
    <li id="li-for-panel-3">
      <label class="panel-label" for="panel-3-ctrl">Tab3</label>
    </li>
</ul>

<!-- THE PANELS -->
<article id="panels">
  <div class="container">
    <section id="panel-1">
      <main>
        <p>Content1</p>
      </main>
    </section>
    <section id="panel-2">
      <main>
        <p>Content2</p>
      </main>
    </section>
    <section id="panel-3">
      <main>
        <p>Content3</p>
      </main>
    </section>
  </div>
</article>

CSS

유사 클래스 :checked

:checked를 써서 탭 전환을 표현합니다.
유사 클래스 :checked는 체크되어있는 라디오버튼(<input type="radio">), 체크박스(<input type="checkbox">), 옵션버튼(<select> 안에 있음 <option>)에 적용됩니다.
기본 구문
(input태그의 「id」또는「class」):checked~(css를 적용하고 싶은 요소) {};

:checked에 관해 자세히 알고 싶은 분은 이곳으로

탭 전환 실행

아래와 같이 태그를 표시/숨김 설정해 줍니다.

#panels section main {
    max-height: 0;
    /*  이하 생략  */
}
#panel-1-ctrl:checked ~ #panels #panel-1 main {
    max-height: initial;
    opacity: 1;
    padding: 48px 24px;
}

초기값은 max-height:0으로 설정되어 숨겨져있지만, #panel-1-ctrlchecked가 되면 아래 css가 적용되어 요소가 보여지게 됩니다.
이번에는 메뉴에 애니메이션을 실행하기 위해 max-height:0을 사용했지만 display:none을 사용해도 좋습니다.

CSS 전문

label.panel-label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    width: 100%;
    color: #bdc3c7;
    cursor: pointer;
    background-color: #ecf0f1;
    -webkit-transition-property: background-color, color;
    transition-property: background-color, color;
    -webkit-transition-duration: 200ms;
    transition-duration: 200ms;
}
label.panel-label:hover {
    color: #003399;
}
#panels {
    background-color: white;
}
#panels .container {
    margin: 0 auto;
    width: 90%;
}
#panels section header label.panel-label {
    padding: 12px 24px;
    box-sizing: border-box;
}
#panels section main {
    box-sizing: border-box;
    max-height: 0;
    opacity: 0;
    -webkit-transition: opacity 600ms;
    transition: opacity 600ms;
    overflow-y: hidden;
}
#panel-1-ctrl:checked ~ #panels #panel-1 main {
    max-height: initial;
    opacity: 1;
    padding: 48px 24px;
}
#panel-2-ctrl:checked ~ #panels #panel-2 main {
    max-height: initial;
    opacity: 1;
    padding: 48px 24px;
}
#panel-3-ctrl:checked ~ #panels #panel-3 main {
    max-height: initial;
    opacity: 1;
    padding: 48px 24px;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
    pointer-events: none;
    cursor: default;
    -webkit-transform: translate3d(0, 1px, 0);
    transform: translate3d(0, 1px, 0);
    box-shadow: none;
    border-right: none;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1.last {
    border-right: 1px solid transparent;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li {
    border-left: 1px solid #dfdfdf;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
    background-color: white;
    color: #003399;
    padding-top: 24px;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label::after {
    height: 6px;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {
    pointer-events: none;
    cursor: default;
    -webkit-transform: translate3d(0, 1px, 0);
    transform: translate3d(0, 1px, 0);
    box-shadow: none;
    border-right: none;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2.last {
    border-right: 1px solid transparent;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 + li {
    border-left: 1px solid #dfdfdf;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
    background-color: white;
    color: #003399;
    padding-top: 24px;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label::after {
    height: 6px;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {
    pointer-events: none;
    cursor: default;
    -webkit-transform: translate3d(0, 1px, 0);
    transform: translate3d(0, 1px, 0);
    box-shadow: none;
    border-right: none;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3.last {
    border-right: 1px solid transparent;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 + li {
    border-left: 1px solid #dfdfdf;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {
    background-color: white;
    color: #003399;
    padding-top: 24px;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label::after {
    height: 6px;
}
ul#tabs-list {
    display: flex;
    justify-content: center;
    list-style: none;
    text-align: center;
    border-bottom: 1px solid #dfdfdf;
    margin: 0;
    padding: 0;
    text-align: center;
    border-bottom: 1px solid #dfdfdf;
}
ul#tabs-list li {
    display: flex;
    text-align: center;
    font-size: 0.875em;
    width: 18%;
    box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);
    border-right: 1px solid #dfdfdf;
    position: relative;
}
ul#tabs-list li:hover {
    -webkit-transition: none;
    transition: none;
    border-right: none;
}
ul#tabs-list li:hover.last {
    border-right: 1px solid transparent;
}
ul#tabs-list li:hover + li {
    border-left: 1px solid #dfdfdf;
}
ul#tabs-list li label.panel-label {
    position: relative;
    padding: 24px 0;
    font-size: 0.875em;
}
ul#tabs-list li label.panel-label::after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 100%;
    background-color: #f16b6f;
    height: 0;
    -webkit-transition-property: height;
    transition-property: height;
    -webkit-transition-duration: 200ms;
    transition-duration: 200ms;
}
ul#tabs-list li label.panel-label:hover {
    padding-top: 24px;
}
ul#tabs-list li label.panel-label:hover::after {
    height: 6px;
}
main {
    width: 70%;
    margin: 0 auto;
}
.panel-radios {
    display: none;
}
body {
    background: #f16b6f;
    color: #444;
}
main p {
    line-height: 1.8;
}

데모페이지입니다.

DEMO