CSS만으로 탭메뉴를 표현하는 방법
CSS만으로 탭메뉴를 표현하는 방법이 몇 가지가 있지만, 이번에 소개할 내용은 input태그를 이용한 방법입니다.
데모페이지입니다.
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;
}
데모페이지입니다.