<input type="checkbox" id="menu">
<label for="menu">
<span></span>
<span></span>
<span></span>
</label>
클릭해서 변화되는 값을 활용하는 것이기 때문에 input 태그와 checkbox 타입을 사용한다.
우선 input에 id값을 부여하고, label의 for 속성으로 input에 부여한 id값을 넣어주어서 label을 클릭해도 input이 체크/해제되도록 해주었다.
그리고 label안에 햄버거 버튼의 3개의 줄을 나타낼 3개의 span 태그를 넣어준다.
input[id="menu"] {
display: none;
}
input[id="menu"] + label {
position: relative;
display: block;
width: 60px;
height: 40px;
cursor: pointer;
}
input[id="menu"] + label span {
position: absolute;
display: block;
width: 100%;
height: 5px;
border-radius: 30px;
background: #000;
transition: 0.3s;
}
input[id="menu"] + label span:nth-child(1) {
top: 0;
}
input[id="menu"] + label span:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
input[id="menu"] + label span:nth-child(3) {
bottom: 0;
}
/* 클릭 시 */
input[id="menu"]:checked + label span:nth-child(1) {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
input[id="menu"]:checked + label span:nth-child(2) {
opacity: 0;
}
input[id="menu"]:checked + label span:nth-child(3) {
bottom: 50%;
transform: translateY(50%) rotate(-45deg);
}
CSS로는 먼저 input을 display:none 처리하여 체크박스가 화면 상에 보이지 않도록 해주고,
label을 블록 요소로 바꿔준 뒤 크기를 지정해준다. 그리고 마우스가 올라갔을 때 커서가 바뀌도록 해주고 3개의 줄을 겹치기 위한 기준으로 relative 값을 주었다.
다음으로 3개의 줄을 나타낼 span 태그에 absolute 값을 주어서 겹치도록 해준 뒤 크기와 색상 등을 지정한다.
그리고 버튼이 움직이는 과정을 부드럽게 보여주기 위해 transition을 준다.
nth-child를 이용해서 각 3개의 줄의 위치를 잡아준다. 첫번째 span은 가장 위로, 마지막 span은 가장 아래로, 그리고 가운데 span은 정중앙에 위치시킨다.
마지막으로 버튼을 클릭했을 때, 즉 체크박스가 체크되었을 때 움직임을 주기 위해 :checked 선택자를 이용해서 3개의 span들의 위치와 각도를 변경해주면 된다.
첫번째 span은 중앙으로 내려온 뒤 45도 회전을, 두번째 span은 보이지 않도록 opacity:0을, 마지막 span은 중앙으로 올라온 뒤 반대로 -45도 회전을 시켜준다.
