[CSS] JS 없이 탭메뉴 만들기

[CSS] JS 없이 탭메뉴 만들기

 

 

JS 없이 페이지를 만드는 과제를 하다가 알게된 코드!

CSS 로도 간단하게 탭메뉴를 구현할 수 있다는 걸 알게되고 바로 적용해보았습니다.

 

 

 

 

1. HTML

  <div class="tab">
    <input type="radio" name="content" id="con1" checked>
    <label for="con1">Menu01</label>
    <input type="radio" name="content" id="con2">
    <label for="con2">Menu02</label>
    <input type="radio" name="content" id="con3">
    <label for="con3">Menu03</label>          
    <div id="menu_1" class="con">
        <p>안녕하세요<br>1페이지입니다.<br>프론트엔드 공부중인 코딩하는 라민입니다.<br>🐥🐥🐥</p>        
    </div>
    <div id="menu_2" class="con">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate beatae id eius modi eveniet facere dolorum fugiat esse repellendus sunt qui dolorem laudantium nesciunt ipsum, libero blanditiis error voluptatum maxime.</p>
    </div>
    <div id="menu_3" class="con">
        <p>마지막 페이지입니다.<br>감사합니다.<br>코딩하는 라민입니다.</p>
    </div>
  </div>

✅ 메뉴의 옆에 있는 동그라미 버튼을 만들기 위해 input 태그의 타입은 radio 로 해줍니다.

✅ label 태그에는 for 속성에 input 태그의 id 이름과 동일하게 적어줍니다.

✅ input, lable 태그와 같은 형제 라인에 표시될 콘텐츠 박스를 만들어줍니다.

 

 

 

2. CSS

/* 라디오 버튼 */
input{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #999;
    background: #fff;
    margin-right: 10px;
    cursor: pointer;
    appearance: none;
    transition: background .5s ease-in-out;
}
input:checked{
    background: #58D2CD;
    border: none;
}
input:checked + label{
    text-decoration: underline;
    text-underline-position: under;
}
label{
    margin-right: 40px;
    transform: translateY(-60px);
    font-size: 22px;
    font-family: 'DM Serif Display';
    cursor: pointer;
}
#con1:checked ~ #menu_1,
#con2:checked ~ #menu_2,
#con3:checked ~ #menu_3{
    display: block;
}

/* 탭 */
.tab{
    width: 600px;
}
.con{
    width: 100%;
    display: none;
    background: #fff;
}
.con p{
  line-height: 2;
}

✅ input 은 라디오 버튼에 대한 크기, 모양, 색상, 여백을  결정해주고,

✅ 원래의 radio 버튼은 appearance: none; 으로 숨겨줍니다. 

 

✅ input:checked 라디오 버튼이 체크가 될 때 변경될 사항들을 지정해줍니다.

✅ input:checked + label input input 라디오버튼이 체크될 때 label 태그에 변경될 사항들을 지정해줍니다.

 

✅ #con1:checked ~ #menu_1, ... { display: block } input 태그가 체크될 때 각 input 에 해당되는 콘텐츠들이 화면에 보이게 설정해줍니다. 이때, 콘텐츠들은 display: none; 으로 가려져있어야 체크될 때 원하는 화면을 표시할 수 있습니다.

 

 

 

3. 코드

See the Pen [CSS] Only CSS tab menu ( input tag ) by ramin5 (@tiramin) on CodePen.