Hamburger Menü (Zwischen den Zeilen kann nicht geclickt werden)

Question

Ich habe ein Problem gefunden, bei dem ich versucht habe, zwischen schwarzen Linien zu klicken und es löst nichts aus, aber löst aus, wenn auf die schwarzen Linien geklickt wird. Ich habe div hinzugefügt, so dass ich den Zeiger um den Bereich herum hinzufügen kann. Mir ist klar, dass es etwas mit dem for = nav-trigger im html geben muss, aber "for" funktioniert nicht mit div. Gibt es eine Problemumgehung?

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

Hier ist der Link zu jsfiddle: https://jsfiddle.net/dxs6040/51wdfypj/14/

Answer 1

die HTML verwenden wie folgt aus:

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

und fügen Sie diese CSS:

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

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