无法点击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汉堡包菜单中的项目

回答

相关问题