無法點擊css漢堡包菜單中的項目

我正在爲僅使用html和css的移動網站構建漢堡包菜單。您可以查看代碼here on codepen.io。無法點擊css漢堡包菜單中的項目

<html> 
<body> 
    <nav> 

    <button class="hamburger"><span></span></button> 

    <div class="close"></div> 

    <ul class="menu"> 
    <li><a href="Page1">Page1</a></li> 

    <li><a href="Page2">Page2</a></li> 

    <li><a href="Page3">Page3</a></li> 

    <li><a href="Page4">Page4</a></li> 

    <li><a href="http://google.com">Google</a></li> 
    </ul> 

    </nav> 
</body> 
</html>

你可以從線106在CSS部分

.hamburger:focus ~ .menu { 
visibility: visible; 
}

菜單看到的是可見的，當按鈕處於焦點。問題是，只要你點擊一個菜單項，按鈕就會失去焦點，菜單消失，然後點擊就可以被處理。
我已經嘗試爲焦點菜單編寫規則，但沒有幫助。

如果您需要任何其他信息，請讓我知道。
預先感謝您的努力。

來源

2016-07-03 md7

添加轉場：能見度0.5秒;在你的菜單上，我已經發布了一個答案檢查出來:) –

在菜單類中添加轉換可見性。請參閱下面的更新課程。

.menu { 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 10px; 
 
    width: auto; 
 
    height: auto; 
 
    visibility: hidden; 
 
    list-style: none; 
 
    background-color: #333; 
 
    transition: visibility 0.5s; 
 
} 
 

 
.menu a { 
 
    color: #87BF58; 
 
    display: block; 
 
    text-decoration: none; 
 
} 
 

 
.hamburger { 
 
    display: block; 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 3rem; 
 
    width: 3rem; 
 
    z-index: 500; 
 
    text-indent: 0; 
 
    appearance: none; 
 
    box-shadow: none; 
 
    border-radius: 0; 
 
    border: none; 
 
    cursor: pointer; 
 
    transition: background 0.3s; 
 
    background-color: yellowgreen; 
 
} 
 

 
.hamburger:focus { 
 
    outline: none; 
 
    background-color: green; 
 
} 
 

 
.hamburger span { 
 
    display: block; 
 
    position: absolute; 
 
    top: 45%; 
 
    left: 25%; 
 
    right: 25%; 
 
    height: 10%; 
 
    background: white; 
 
    transition: background 0s 0.3s; 
 
} 
 

 
.hamburger span::before, 
 
.hamburger span::after { 
 
    position: absolute; 
 
    display: block; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #fff; 
 
    content: ""; 
 
    transition-duration: 0.3s, 0.3s; 
 
    transition-delay: 0.3s, 0s; 
 
} 
 

 
.hamburger span::before { 
 
    top: -210%; 
 
    transition-property: top, transform; 
 
} 
 

 
.hamburger span::after { 
 
    bottom: -210%; 
 
    transition-property: bottom, transform; 
 
} 
 

 
.hamburger:focus span { 
 
    background: none; 
 
} 
 

 
.hamburger:focus span::before { 
 
    top: 0; 
 
    transform: rotate(45deg); 
 
} 
 

 
.hamburger:focus span::after { 
 
    bottom: 0; 
 
    transform: rotate(-45deg); 
 

 
} 
 

 
.hamburger:focus span::before, 
 
.hamburger:focus span::after { 
 
    transition-delay: 0s, 0.3s; 
 

 
} 
 

 
.close { 
 
    position: absolute; 
 
    height: 3rem; 
 
    width: 3rem; 
 
    margin-top: -3rem; 
 
    z-index: 501; 
 
    background-color: transparent; 
 
    cursor: pointer; 
 
    visibility: hidden; 
 
} 
 

 
.hamburger:focus ~ .menu { 
 
    visibility: visible; 
 
} 
 

 
.hamburger:focus ~ .close { 
 
    visibility: visible; 
 
}

<nav> 
 

 

 
    <button class="hamburger"><span></span></button> 
 

 
    <div class="close"></div> 
 

 
    <ul class="menu"> 
 
     <li><a href="Page1">Page1</a></li> 
 

 
     <li><a href="Page2">Page2</a></li> 
 

 
     <li><a href="Page3">Page3</a></li> 
 

 
     <li><a href="Page4">Page4</a></li> 
 

 
     <li><a href="google.com">Google</a></li> 
 
    </ul> 
 

 
    </nav>

來源

2016-07-03 15:31:09

謝謝你@Allan。我目前正在檢查您的建議是否適用於我的用例。只要我完成測試，我會將您的答案標記爲已接受。 – md7

沒問題朋友:)希望它也適用於你的用例。儘管我對此感到樂觀：P –

無法點擊css漢堡包菜單中的項目

回答

相關問題