如何使這個CSS漢堡包菜單完全可點擊？

我正在研究純CSS漢堡包菜單圖標，到目前爲止它的工作效果很好，除了線條之間的間隙不可點擊。我怎樣才能修改這段代碼，使整個按鈕可以點擊而不僅僅是點擊線條？如何使這個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。

謝謝！

來源

2014-10-01 user13286

你可以借鑑下的每個黑盒白盒，而不是僅僅創造空白的。 – Nicolas 2014-10-01 21:31:26

您可以將標籤包裝在具有前後屬性的div上。否則，你不會選擇：屬性後。 – mijopabe 2014-10-01 21:31:49

只是這樣做

DEMO - 1（邊框頂部或底部）

.menu { 
 
    width:30px; 
 
    height:20px; 
 
    position:relative; 
 
    display:inline-block; 
 
    border-top:4px solid black; 
 
} 
 
\t .menu:after, .menu:before { 
 
\t  content: ''; 
 
\t  width: 100%; 
 
\t  height:4px; 
 
\t  background-color:#000; 
 
\t  position:absolute; 
 
\t } 
 
\t .menu:after { 
 
\t  bottom:0px; 
 
\t  left:0; 
 
\t } 
 
\t .menu:before { 
 
\t  top:6px; 
 
\t  left:0; 
 
\t }

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

DEMO -2（箱陰影）

.menu { 
 
    width:30px; 
 
    height:20px; 
 
    position:relative; 
 
    display:inline-block; 
 
    box-shadow:inset 0 4px 0 black; 
 
} 
 
\t .menu:after, .menu:before { 
 
\t  content: ''; 
 
\t  width: 100%; 
 
\t  height:4px; 
 
\t  background-color:#000; 
 
\t  position:absolute; 
 
\t } 
 
\t .menu:after { 
 
\t  bottom:0px; 
 
\t  left:0; 
 
\t } 
 
\t .menu:before { 
 
\t  top:8px; 
 
\t  left:0; 
 
\t }

<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; 
 
} 
 
\t .menu:after{ 
 
\t  content: ''; 
 
\t  width: 100%; 
 
\t  height:4px; 
 
\t  background-color:#000; 
 
\t  position:absolute; 
 
     top:8px; 
 
\t  left:0; 
 
\t }

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

DEMO - 4

.menu { 
 
    width:30px; 
 
    height:14px; 
 
    position:relative; 
 
    display:inline-block; 
 
    border-top: 4px solid black; 
 
    border-bottom: 4px solid black; 
 
} 
 
\t .menu:after{ 
 
\t  content: ''; 
 
\t  width: 100%; 
 
\t  height:4px; 
 
\t  background-color:#000; 
 
\t  position:absolute; 
 
     top:5px; 
 
\t  left:0; 
 
\t }

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

來源

2014-10-01 21:34:44

這非常聰明！ – 2014-10-01 21:38:56

完美。非常感謝，特別是提供多種解決方案！這一定會派上用場。 – user13286 2014-10-01 21:41:52

只需添加一些更新與背景圖片，如果可以幫助您 – 2014-10-01 21:51:35

如何使這個CSS漢堡包菜單完全可點擊？

回答

相關問題