如何使这个 CSS 汉堡菜单完全可点击? [英] How to make this CSS hamburger menu entirely clickable?

问题描述

我正在研究一个纯 CSS 汉堡菜单图标，到目前为止，它运行良好，只是线条之间的间隙不可点击.如何修改此代码以使整个按钮都可点击，而不仅仅是线条?

I am working on a pure CSS hamburger menu icon, so far it's working great, except that the gaps between the lines are not clickable. How can I modify this code so that the entire button is clickable as opposed to just the lines?

<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)

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(仅:在混合框阴影插入之前或之后)

DEMO - 3 (only :before or after mixed box-shadow inset)

.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>

这篇关于如何使这个 CSS 汉堡菜单完全可点击?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！