인프런 커뮤니티 질문&답변

■ 질문 남기실 때 꼭! 참고해주세요.

- 먼저 유사한 질문이 있었는지 검색해주세요.
- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.
- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.
- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.

질문내용: checked 초기에는 선택이 되지만

checked가 해제된 상태로 돌아가지 않습니다.

html

  <header>

  <input type="checkbox" id="trigger">
  <label for="trigger">
    <span></span>
    <span></span>
    <span></span>
  </label>

    <nav class="header__nav">

      <ul class="header__nav-list">
        <li><a href="#home" class="header__menu-link">HOME</a></li>
        <li><a href="#profile" class="header__menu-link">PROFILE</a></li>
        <li><a href="#projects" class="header__menu-link">WORKS</a></li>
        <li><a href="#resume" class="header__menu-link">RESUME</a></li>
        <li><a href="#contact" class="header__menu-link">CONTACT</a></li>
      </ul>
    </nav>

    <a href="#home" class="header__top-btn">TOP</a>



  </header>

css

.header__nav {
    position: fixed;
    top: 0;
    left: -100%;
    list-style: none;
    z-index: 1000;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }  /*checked 안된상태*/

input[id=trigger]:checked ~  nav.header__nav {
    transform: translateX(0);
    left:0
  }

input[id=trigger] {
display: none; 
}

label[for=trigger] {
  display: block;
  width: 25px;
  height: 24px;
  position: relative;
  cursor: pointer;
}

label[for=trigger] span {
  position: absolute;
 top: 0;
 left: 0;
 display: block;
 height: 2px;
 width: 100%;
 background: #FFD24C;
 transition: 0.3s;
}

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%;
}

/* 체크박스 선택 시 */

input[id=trigger]:checked + label[for=trigger] span:nth-child(1) {
  top: 50%;
  transform: rotate(45deg);
}

input[id=trigger]:checked + label[for=trigger] span:nth-child(2) {
  display: none;
}

input[id=trigger]:checked + label[for=trigger] span:nth-child(3) {
  top: 50%;
  transform: rotate(-45deg);
}