inflearn logo
강의

Course
Instructor

Responsive Website Portfolio (App Official Landing Website)

x 버튼으로 변경후에 위치 이동에서 자연스러운 애니메이션이 안돼요 ㅠㅠ

368

wowdodu1235240

2 asked

1

강의 너무 재미있고 잘듣구있습니다!

너무너무 알차요~!~!~!

근데 ㅠㅠ 다 되는데 이상하게 하나가.. 안따라지네요..

햄버거 바 버튼에서  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;
}

애니메이션 트렌지션 반응형-웹 트리거 jquery HTML/CSS

Answer 2

2

codingworks

강의에는 xeicon을 :before에 넣어서 변경했는데 인접선택자로 하셨네요.

css 보니까 HTML+CSS+JQUERY 포트폴리오 실전 퍼블리싱 강의에 있는 예제 같은데요...

그런데 html 코드도 주셔야 뭐가 문제인지 알 수 있어요.

html 코드 다시 첨부해주세요. 그리고 오류나는 결과화면 캡쳐도 첨부 해주세요.

0

wowdodu1235240

첨부합니다! 

저기 x 버튼이  햄버거바 에서  이동할때 스르륵 같이 핑크 사이드바 랑 이동해야하는데

그게안되더라구요

분명히 트랜지션을 넣었는데 왜이럴까요?ㅠㅠ..  

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css.css" class="stylesheet">
</head>
<body>
    
    <div class="container">
      <input type="checkbox" id="trigger">
      <label for="trigger">
        <span></span>
        <span></span>
        <span></span>

      </label>

      <div class="sidebar"></div>

       </div>

</body>
</html>

하드코딩으로 이미지맵(image map) 만들기

1

79

2

슬릭 슬라이더

1

147

2

position: fixed; 가 안먹혀요..뭐가 문제일까요?

1

167

1

반응형 fixed 안먹히는 문제

1

264

2

선생님

2

155

1

.news-thum .date 위치가 안맞아요

1

245

2

TypeIt - Welcome 부분이 적용이 안됩니다..

1

369

2

Scroll Reveal Animation 적용이 안되요

1

362

1

완성 후 각 섹션 display:none 주석 시 문제

1

384

3

브라우저를 줄일 때 화면 깨짐

1

632

2

welcome-heading 부분이 왜 저렇게 위치되는지 모르겠습니다.

1

340

1

제이쿼리 탭메뉴 클릭 질문

1

236

1

질문있습니다

1

548

1

질문있습니다.

2

646

2

슬릭슬라이더가 왜 안되는지 모르겠습니다

1

621

1

slick slider와 .ceo-content영역 겹침

1

719

1

span .badge 부분 참고하실분 하세요

2

333

1

플렉스를 안주고 그냥 패딩을 줘도 되지 않나요

1

330

1

창을 줄이면 위치가 이동되는 백그라운드 이미지

1

531

1

크롬창을 줄어들면 이미지가 작아짐

1

742

1

scroll behavior 오류

1

265

1

선생님 코딩좀 봐주세요..

1

399

3

왜 전 선생님과 화면이 다를까요?

1

365

3

따라했는데 이상합니ㅏㄷ..ㅠ

1

291

2