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

我目前正在尝试仅为CSS中的某个应用的导航栏执行某种下拉菜单。
我的导航栏由于有一个复选框，在选中时展开，在未选中的情况下用动画隐藏自己，当用户点击导航栏上的任意位置时将其翻译为用户，并隐藏或展开。我的导航栏中的所有锚都链接到ID。
我的问题是，当我点击任何链接时，复选框不会取消选中，所以导航栏不会执行“回退”动画。单击锚点时取消选中复选框（仅限CSS）

这里的导航栏是什么样子的HTML（玉琅）：

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

就这么简单。但是当点击导航栏的任何链接时，我不知道如何取消选中复选框。

谢谢:)。

编辑我重新提出了我的问题。

来源

2015-10-08 PLD

你能做出格复选框并将其设计为不可见，然后添加标签和样式来代替div？这样，你可以定位你的CSS中的复选框。 –

我很确定使用CSS操作表单控件的状态是不可能的 – pawel

@mt_xing对不起，我重新写了我的问题，因为它有问题，所以是的，我已经在使用复选框了。 – PLD

您无法使用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">页面上的任何地方，因此该功能不依赖于特定的标记，这是需要与相邻的兄弟解决方案：http://jsfiddle.net/nt87koye/4/

来源

2015-10-09 09:02:18 pawel

再次感谢您。 – PLD

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

回答

相关问题