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

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

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

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

데모페이지입니다.

DEMO

HTML

input태그와 label태그를 사용해서 탭을 만듭니다.
input의 id와 lable의 for속성이 대응해, label을 클릭하면 input에 checked속성이 붙습니다.
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-ctrl이 checked가 되면 아래 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

댓글

  1. 名前:김수희 : 게시일: 2017/11/20(월), 15:40:48 ID：k4Njc3OTE

    익스에서는 내용이 한곳에서 안나오고 삼등분되어서 나옵니다 ㅜㅜ

    뭘고쳐야 사용가능할까요?

    응답
    • 名前:nanati : 게시일: 2017/11/20(월), 19:34:57 ID：I0ODg2NDk

      제 컴에서는 잘 나오는데 링크 알려주시지 않는이상 확인이 불가능합니다~

      응답
  2. 名前:pecial : 게시일: 2017/08/21(월), 17:51:51 ID：QxODYyMjM

    이럴경우 접근성이나 웹표준에 문제가 되지는 않나요??

    응답
    • 名前:nanati : 게시일: 2017/08/22(화), 00:37:54 ID：YyODkyMjY

      CSS만으로 표현할 수 있는 방법을 기록한 것으로
      웹표준이나 접근성은 고려하지 않았습니다.
      좀 더 고민해보도록 할게요 ^^ 감사합니다.

      응답
제목과 URL을 복사했습니다