我只使用 html 和 css 为移动网站构建汉堡菜单。可以查看代码here on codepen.io .
<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>
从css部分的106行可以看出
.hamburger:focus ~ .menu {
visibility: visible;
}
当按钮处于焦点时，菜单可见。问题是，一旦您单击菜单项，按钮就会失去焦点并且菜单会在单击可以被处理之前消失。
我已经尝试为焦点菜单编写规则，但没有帮助。
如果您需要任何其他信息，请告诉我。
预先感谢您的努力。
最佳答案
在您的菜单类上添加过渡可见性。请参阅下面更新的类(class)。
.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>关于css - 无法单击 css 汉堡菜单中的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38171166/