햄버거 메뉴 (줄 사이가 끊어지지 않음)

Question

검은 색 선 사이를 클릭하려고했지만 아무 것도 트리거하지 않지만 검은 선을 클릭하면 트리거되는 문제가 발생했습니다. div를 추가하여 커서 포인터를 영역 주위에 추가 할 수 있습니다. 나는 그것이 for = nav-trigger가있는 html에있는 뭔가 여야 만한다는 것을 알고 있지만 for는 div와 작동하지 않습니다. 해결 방법이 있습니까? https://jsfiddle.net/dxs6040/51wdfypj/14/

Answer 1

이 같은 HTML 사용 :

<div id="menu"> 
    <label for="nav-trigger"> 
    <input type="checkbox" id="nav-trigger" class="nav-trigger" /> 
    <span id="menuButton"></span> 
    </label> 
</div> 

및 CSS를이 추가 :

label { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    cursor: pointer; 
} 

jsfiddle : https://jsfiddle.net/e9qafkbr/

다음

<div id="menu"> 
    <input type="checkbox" id="nav-trigger" class="nav-trigger"/> 
    <label id="menuButton" for="nav-trigger"></label> 
</div> 

는 jsfiddle 할 수있는 링크입니다