汉堡菜单可点击区域太小

时间:2017-07-27 23:53:35

标签: css menu anchor nav

https://codepen.io/everybodysfeelingwonderland/full/OjyRpM/

对于我网站的移动尺寸,菜单中的汉堡图标的可点击区域太小,只有那些细线。

我也有这个问题,我希望有更大的可点击区域的其他锚点,但不希望元素本身在我的页面上变得更大。

<div id="burger-container">
        <div id="burger">
          <span>&nbsp;</span>
          <span>&nbsp;</span>
          <span>&nbsp;</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;
}

}

2 个答案:

答案 0 :(得分:2)

尝试添加固定的宽度和高度

#burger {
    cursor: pointer;
    display: block;
    height: 30px;
    width: 50px;
}

答案 1 :(得分:1)

您可以像这样更改CSS:

#burger{
    display: none;
    padding: 23px 15px 10px;
}

@media all and (max-width: 580px){

    #burger-container{
        float: right;
    }

    #burger{
        cursor: pointer;
        display: block;
    }
}

这样,当屏幕宽度为580px或更小时,您只显示汉堡菜单,并且填充为您提供更大的点击区域。

例如,请参阅此codepen

在我看来,这是一种更好的做法,因为您不必设置特定的宽度和高度,只需使用padding