回転要素をクリックしてdivを全体をクリック可能にする

Question

クリックすると2つの子供が回転し、1つは表示されないハンバーガーメニューが作成されました。ハンバーガーの幅は30px、高さは13pxです。事は：2人の子供が回転するとき、高さが増加しますが、中心エリア（30px/13pxはクリック可能です）だけです。

"X"全体をクリック可能にするにはどうすればよいですか？

var hamburger = document.getElementById("menu-icon-css"); 
 
var menuMobile = document.getElementById("menu-links"); 
 

 
hamburger.addEventListener("click", function open() { 
 
    hamburger.classList.toggle("rotate"); 
 
})

#menu-icon-css { 
 
    z-index: 50; 
 
    margin-top: 50px; 
 
    width: 30px; 
 
    height: 13px; 
 
    position: relative; 
 
    cursor: pointer; 
 
    display: block; 
 
} 
 
#menu-icon-css span { 
 
    transition: 0.3s all ease-in-out; 
 
    height: 3px; 
 
    background-color: #000; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 
#menu-icon-css span:nth-child(1) { 
 
    top: 0; 
 
} 
 
#menu-icon-css span:nth-child(2) { 
 
    top: 6px; 
 
    width: 70%; 
 
    right: 0; 
 
} 
 
#menu-icon-css span:nth-child(3) { 
 
    top: 12px; 
 
} 
 
@media screen and (min-width: 920px) { 
 
    #menu-icon-css { 
 
    display: none; 
 
    } 
 
} 
 

 
#menu-icon-css.rotate span:nth-child(1) { 
 
    transform: rotate(135deg); 
 
    top: 6px; 
 
} 
 
#menu-icon-css.rotate span:nth-child(2) { 
 
    opacity: 0; 
 
    transition: 0.1s all ease-in-out; 
 
} 
 
#menu-icon-css.rotate span:nth-child(3) { 
 
    transform: rotate(-135deg); 
 
    top: 6px; 
 
}

<div id="menu-icon-css"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
</div>

私は点検上の問題のプリントを残しておきます。

ありがとうございます！

Answer 1

メインの上余白、menu-icon-css divの高さ、子要素の位置（例：次のような部分）を少し試してみてください。 （変更したコード内の行はコメントアウトし、変更を含む行に置き換えました）

#menu-icon-css { 
    z-index: 50; 
    //margin-top: 50px; 
    margin-top: 42px; 
    width: 30px; 
    //height: 13px; 
    height: 30px; 
    position: relative; 
    cursor: pointer; 
    display: block; 
} 
#menu-icon-css span { 
    transition: 0.3s all ease-in-out; 
    height: 3px; 
    background-color: #000; 
    position: absolute; 
    width: 100%; 
} 
#menu-icon-css span:nth-child(1) { 
    top: 0; 
} 
#menu-icon-css span:nth-child(2) { 
    top: 6px; 
    width: 70%; 
    right: 0; 
} 
#menu-icon-css span:nth-child(3) { 
    top: 12px; 
} 
@media screen and (min-width: 920px) { 
    #menu-icon-css { 
    display: none; 
    } 
} 

#menu-icon-css.rotate span:nth-child(1) { 
    transform: rotate(135deg); 
    //top: 6px; 
    top: 14px; 
} 
#menu-icon-css.rotate span:nth-child(2) { 
    opacity: 0; 
    transition: 0.1s all ease-in-out; 
} 
#menu-icon-css.rotate span:nth-child(3) { 
    transform: rotate(-135deg); 
    //top: 6px; 
    top: 14px; 
}