tab Menu - input type radio (input 라디오로 탭메뉴 만들기)

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