tab Menu - input type radio (input 라디오로 탭메뉴 만들기)
2022. 10. 18. 16:36ㆍCSS
input태그의 radio 타입을 이용하여 탭 메뉴 만들기
HTML
<div class="container">
<!-- tab -->
<input type="radio" id="tab1" name="tapGroup" class="tab" checked />
<label for="tab1">Short</label>
<input type="radio" id="tab2" name="tapGroup" class="tab" />
<label for="tab2">Medium</label>
<input type="radio" id="tab2" name="tapGroup" class="tab" />
<label for="tab2">Long</label>
<!-- /tab -->
<!-- contents -->
<content>
<h3>Short Section</h3>
<p>Praesent nonummy mi in odio. Nullam accumsan lorem in dui. Vestibulum turpis sem,
aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nullam accumsan lorem in dui.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</content>
<content>
<h3>Medium Section</h3>
<p>Praesent nonummy mi in odio. Nullam accumsan lorem in dui. Vestibulum turpis sem,
aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nullam accumsan lorem in dui.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Morbi mattis ullamcorper
velit. Pellentesque posuere. Etiam ut purus mattis mauris sodales aliquam. Praesent nec
nisl a purus blandit viverra.</p>
</content>
<content>
<h3>Long Section</h3>
<p>Praesent nonummy mi in odio. Nullam accumsan lorem in dui. Vestibulum turpis sem,
aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nullam accumsan lorem in dui.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Morbi mattis ullamcorper
velit. Pellentesque posuere. Etiam ut purus mattis mauris sodales aliquam. Praesent nec
nisl a purus blandit viverra.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Morbi mattis ullamcorper
velit. Pellentesque posuere. Etiam ut purus mattis mauris sodales aliquam. Praesent nec
nisl a purus blandit viverra.</p>
</content>
<!-- /contents -->
</div>
CSS
.container{
display: flex;
flex-wrap: wrap;
position: relative;
max-width: 800px;
margin: 0 auto;
border-radius: 6px;
background: #fff;
box-shadow:0 1px 2px rgba(0, 0, 0, 0.24);
transition: .3s box-shadow ease;
}
.container:hover {box-shadow:0 10px 10px rgba(0, 0, 0, 0.19);}
.container > .tab {display: none;}
.container > .tab + label {
flex-grow: 1;
height: 50px;
padding: 15px;
color: #333;
background: #f2f2f2;
box-shadow: 0 -1px 0 #eee inset;
transition: .3s background-color ease, .3s box-shadow ease;
box-sizing: border-box;
user-select: none;
cursor: pointer;
}
.container > .tab:first-of-type + label {border-radius:6px 0 0 0;}
.container > .tab:last-of-type + label {border-radius: 0 6px 0 0;}
.container > .tab + label:hover {backgorund-color: #f9f9f9;}
.container > .content {
position: absolute;
width: 100%;
padding: 20px 30px;
border-radius: 6px;
transform: translateY(-3px);
opacity: 0;
z-index: -1;
}
.container > .tab.checked + label {
background-color: #fff;
cursor: default;
}
.container > .tab.checked:nth-of-type(1) ~ content:nth-of-type(1),
.container > .tab.checked:nth-of-type(2) ~ content:nth-of-type(2),
.container > .tab.checked:nth-of-type(3) ~ content:nth-of-type(3){
position: relative;
transform: translateY(0px);
transition: .5s opacity ease-in, .8s transform ease;
opacity: 1;
z-index: 999;
}
참고사이트
https://codepen.io/alvarotrigo/pen/GRMbzBR?editors=1100
'CSS' 카테고리의 다른 글
input date 텍스트 컬러 변경 (0) | 2022.12.08 |
---|---|
css + js ) input date 커스텀 (0) | 2022.11.29 |
css 한줄쓰기 (0) | 2022.10.14 |
플로팅 메뉴 (시간차 메뉴 나오기) (0) | 2022.08.30 |
border 겹침 없애기 (0) | 2022.07.21 |