gpt4 book ai didi

html - 如何使这个 CSS 汉堡菜单完全可点击?

转载 作者:技术小花猫 更新时间:2023-10-29 12:01:59 24 4
gpt4 key购买 nike

我正在制作一个纯 CSS 汉堡包菜单图标,到目前为止效果很好,只是线条之间的间隙不可点击。我如何修改这段代码,使整个按钮都可以点击,而不仅仅是线条?

<a href="#" title="Open Menu" class="menu"></a>

.menu {
width:30px;
height:5px;
background-color:#000;
position:relative;
display:inline-block;
}
.menu:after, .menu:before {
content: '';
width: 100%;
height:5px;
background-color:#000;
position:absolute;
}
.menu:after {
top:10px;
left:0;
}
.menu:before {
top:20px;
left:0;
}

这是一个 JSFiddle .

谢谢!

最佳答案

就这样

DEMO - 1(边框顶部或底部)

.menu {
width:30px;
height:20px;
position:relative;
display:inline-block;
border-top:4px solid black;
}
.menu:after, .menu:before {
content: '';
width: 100%;
height:4px;
background-color:#000;
position:absolute;
}
.menu:after {
bottom:0px;
left:0;
}
.menu:before {
top:6px;
left:0;
}
<a href="#" title="Open Menu" class="menu"></a>

DEMO -2 (box-shadow)

.menu {
width:30px;
height:20px;
position:relative;
display:inline-block;
box-shadow:inset 0 4px 0 black;
}
.menu:after, .menu:before {
content: '';
width: 100%;
height:4px;
background-color:#000;
position:absolute;
}
.menu:after {
bottom:0px;
left:0;
}
.menu:before {
top:8px;
left:0;
}
<a href="#" title="Open Menu" class="menu"></a>

DEMO - 3(仅:混合框阴影插入之前或之后)

.menu {
width:30px;
height:20px;
position:relative;
display:inline-block;
box-shadow:inset 0 4px 0 black,inset 0 -4px 0 black;
}
.menu:after{
content: '';
width: 100%;
height:4px;
background-color:#000;
position:absolute;
top:8px;
left:0;
}
<a href="#" title="Open Menu" class="menu"></a>

演示 - 4

.menu {
width:30px;
height:14px;
position:relative;
display:inline-block;
border-top: 4px solid black;
border-bottom: 4px solid black;
}
.menu:after{
content: '';
width: 100%;
height:4px;
background-color:#000;
position:absolute;
top:5px;
left:0;
}
<a href="#" title="Open Menu" class="menu"></a>

DEMO - 5(使用背景图片)

.menu {
width: 30px;
height: 26px;
position: relative;
display: inline-block;
background-size: 10px 10px;
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 1) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(0, 0, 0, 1) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(0, 0, 0, 1) 50%, transparent 50%, transparent);
}
<a href="#" title="Open Menu" class="menu"></a>

关于html - 如何使这个 CSS 汉堡菜单完全可点击?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26150963/

24 4 0
文章推荐: html - 哪些浏览器支持 标签?