Question

我目前正尝试在CSS中为应用的导航栏执行某种下拉菜单。
我的导航栏，由于一个复选框，当选中，展开时，当取消选中时，会隐藏自己的动画，当用户点击导航栏上的任何位置时，它会翻译给用户，它会隐藏或扩展自己。导航栏中的所有锚点都链接到ids 我的问题是，当我点击任何链接时，复选框不会取消选中，因此导航栏不会执行“回退”动画。

这是导航栏在html（jade-lang）中的样子：

 header
      input(type='checkbox')#btn
      label(for='btn')#menu
          nav
              ul
                  li: a(href='#presentation') Accueil

并且，只是想知道看起来像css：

header input {
    display: none;
}

 #menu {
    position: fixed;
    left: 100%;
    height: 100%;
    width: 100%;
    background-color: #333333;
    font-weight: 500;
}

header input:checked + #menu {
    -webkit-animation: showMenu 0.5s forwards;
    animation: showMenu 0.5s forwards;
}
@-webkit-keyframes showMenu { from { left: 100%; } to { left: 0%; } }
@keyframes showMenu { from { left: 100%; } to { left: 0%; } }

 header input + #menu {
    -webkit-animation: hideMenu 0.5s forwards;
    animation: hideMenu 0.5s forwards;
}
@-webkit-keyframes hideMenu { from { left: 0%; } to { left: 100%; } }
@keyframes hideMenu { from { left: 0%; } to { left: 100%; } }

这很简单。但是，如果单击导航栏的任何链接，我都无法取消选中复选框。

谢谢:)。

编辑我重写了我的问题。

Answer 1

您无法使用CSS检查/取消选中复选框，您需要使用一些JavaScript。据我所知，这个练习的目的是在纯CSS中创建一个菜单切换类型的按钮。

您可以使用:focus + *代替:checked + *，因此您需要一个可聚焦的元素，例如<a>来切换菜单：

<强> HTML：

<a href="#">Toggle menu</a>
<nav id="menu">
    <a href="#foo">Link</a><br>
    <a href="#bar">Link 2</a>
</nav>

** CSS **

#menu {
    position: fixed;
    left: 100%;
    top:0;
    width: 100%;
    transition: left 300ms 300ms; /* note the additional transition delay */
}
a:focus + #menu {
    left:0;
    transition-delay:0;
}

演示：http://jsfiddle.net/nt87koye/2/

这样，当链接具有焦点时，菜单会滑入，并在焦点丢失后滑出（用户点击链接外的任何位置）。

您还可以使用:target伪类并在页面上的任何位置放置<a href="#menu">，因此该功能不依赖于相邻兄弟解决方案所需的特定标记：{{3} }

单击锚点时取消选中复选框（仅限CSS）

1 个答案: