미해결
반응형 웹사이트 포트폴리오(App Official Landing Website)
x 버튼으로 변경후에 위치 이동에서 자연스러운 애니메이션이 안돼요 ㅠㅠ
강의 너무 재미있고 잘듣구있습니다!
너무너무 알차요~!~!~!
근데 ㅠㅠ 다 되는데 이상하게 하나가.. 안따라지네요..
햄버거 바 버튼에서 x 버튼으로 자연스러운 이미지 변환은 가능한데요!
x버튼이 사이드바를 따라서 스르륵 이동하는게 안되네요 ..
ㅠㅠ.. 제가보기엔 소스코드가 같은거같은데
어디가 잘못된건지.. ㅠㅠ 이틀을 .. 계속 강의따라서 다시 코드 타이핑을 해봐도 같아서.. 질문드립니다 !
input[id=trigger]{
display: none;
}
label[for=trigger]{
border: 1px solid red;
width: 30px;
height: 20px;
display: inline-block;
position: absolute;
transition: 0.3s;
}
label[for=trigger] span{
display: block;
height: 2px;
width: 100%;
background-color: black;
position:absolute;
left: 0;
cursor: pointer;
transition: 0.3s;
z-index: 100;
}
label[for=trigger] span:nth-child(1){
top: 0;
}
label[for=trigger] span:nth-child(2){
top: 50%;
}
label[for=trigger] span:nth-child(3){
top: 100%;
}
/* display: none; 이지만 label과 같은 이름이기때문에 체크가 된다. */
input[id=trigger]:checked + label span:nth-child(1){
top: 50%;
transform: rotate(45deg);
}
input[id=trigger]:checked + label span:nth-child(2){
opacity: 0;
}
input[id=trigger]:checked + label span:nth-child(3){
top: 50%;
transform: rotate(-45deg);
}
.sidebar{
width: 250px;
height: 100vh;
background-color: pink;
position: fixed;
top:0;
left: -250px;
transition: 0.3s;
}
input[id=trigger]:checked ~ .sidebar{
left: 0px;
}
input[id=trigger]:checked + label{
left: 250px;
}
