https://codepen.io/everybodysfeelingwonderland/full/OjyRpM/
对于我网站的移动尺寸,我的菜单汉堡图标的可点击区域太小了,只有那些细线。
我也有其他 anchor 的问题,我希望它们具有更大的可点击区域,但不希望元素本身在我的页面上变得更大。
<div id="burger-container">
<div id="burger">
<span> </span>
<span> </span>
<span> </span>
</div>
</div>
CSS
#burger-container{
margin: 25px 0 0 0;
width: 50px;
float: right;
padding-right: 70px;
}
#burger{
cursor: pointer;
display: block;
}
#burger span{
background: black;
display: block;
width: 50px;
height: 3px;
margin-bottom: 10px;
position: relative;
top: 0;
transition: all ease-in-out 0.4s;
}
#burger-container.open span:nth-child(2){
width: 0;
opacity: 0;
}
#burger-container.open span:nth-child(3){
transform: rotate(45deg);
top: -13px;
}
#burger-container.open span:nth-child(1){
transform: rotate(-45deg);
top: 13px;
}
}
最佳答案
尝试添加固定宽度和高度
#burger {
cursor: pointer;
display: block;
height: 30px;
width: 50px;
}
关于css - 汉堡菜单可点击区域太小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45362780/