HTML – 如何使这个CSS汉堡菜单完全可点击？_html-js-css

概述我正在研究一个纯CSS汉堡菜单图标,到目前为止它工作得很好,除了线之间的间隙不可点击.如何修改此代码,以便整个按钮可以单击而不仅仅是线条？ <a href="#" title="Open Menu" class="menu"></a>.menu { width:30px; height:5px; background-color:#000; position:r 我正在研究一个纯CSS汉堡菜单图标,到目前为止它工作得很好,除了线之间的间隙不可点击.如何修改此代码,以便整个按钮可以单击而不仅仅是线条？

<a href="#" title="Open 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" ></a>

DEMO -2(盒子阴影)

.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" ></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" ></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" ></a>

DEMO – 5(使用背景图片)

.menu {wIDth: 30px;height: 26px;position: relative;display: inline-block;background-size: 10px 10px;background-image: -webkit-linear-gradIEnt(rgba(0,1) 50%,transparent 50%,transparent);background-image: -moz-linear-gradIEnt(rgba(0,transparent);background-image: linear-gradIEnt(rgba(0,transparent);}