버튼 토글로 메뉴 보이기 숨기기 하는 방법 checked 속성 사용

HTML태그

  <input type="checkbox" name="" id="toggle">


    <div id="toggle_gnb_wrap">
      <div id="toggle_gnb">
        <ul>
          <li><a href="#">버튼</a></li>
          <li><a href="#">버튼</a></li>
          <li><a href="#">버튼</a></li>
          <li><a href="#">버튼</a></li>
          <li><a href="#">버튼</a></li>
          <li><a href="#">버튼</a></li>
          <li><a href="#">버튼</a></li>
          <li><a href="#">버튼</a></li>
        </ul>
      </div>
    </div>

CSS 값

#toggle{
  display: none;
}
#toggle + #wrap > #toggle_gnb_wrap{
  display: none;
}

#toggle:checked + #wrap > #toggle_gnb_wrap{
  display: block;
}

 

여기서 핵심은

 

CSS 선택자 중 + 활용법과, input box이 checked 상태값을 활용하는 것이다.

 

참고 자료 : 모든 웹 디자인을 위한 HTML5 + CSS3 입문, 개정판, 330page 발췌