Question

我正在使用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;
}

当按钮处于焦点时，菜单可见。问题是，只要您点击菜单项，该按钮就会失焦，菜单会在处理点击之前消失。
我已经尝试为焦点菜单编写规则，但它没有帮助。

如果您需要任何其他信息，请与我们联系提前感谢您的努力。

Answer 1

在菜单类上添加转换可见性。请参阅下面的更新课程。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

无法点击css汉堡菜单中的项目

1 个答案: