css&html 选中复选框时应显示导航栏
css&html nav bar should appear when checkbox is checked
我试过使用两个同级选择器(~
,如代码片段中所示,以及 +
)使 nav
条在选中该框时出现,但它不起作用,我也不知道还能做什么。
nav {
left: -100%;
position: fixed;
}
#check:checked~nav {
left: 0;
}
<input type="checkbox" id="check"><label for="check"><i class="fas fa-bars"></i></label></div>
<nav>
<ul>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</nav>
你的代码应该是这样的,首先你有一个 none 关闭的 <div>
标签,并为 +
兄弟 select 移动上面的标签复选框。
nav{
left: -100%;
position: fixed;
}
#check:checked + nav{
left: 0px;
}
<label for="check"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="check">
<nav>
<ul><li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</nav>
如果您希望标签的顺序相同,请更改 CSS
select 或更改为:
nav{
left: -100%;
position: fixed;
}
#check:checked + label + nav{
left: 0px;
}
<input type="checkbox" id="check">
<label for="check"><i class="fas fa-bars"></i></label>
<nav>
<ul>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</nav>
我试过使用两个同级选择器(~
,如代码片段中所示,以及 +
)使 nav
条在选中该框时出现,但它不起作用,我也不知道还能做什么。
nav {
left: -100%;
position: fixed;
}
#check:checked~nav {
left: 0;
}
<input type="checkbox" id="check"><label for="check"><i class="fas fa-bars"></i></label></div>
<nav>
<ul>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</nav>
你的代码应该是这样的,首先你有一个 none 关闭的 <div>
标签,并为 +
兄弟 select 移动上面的标签复选框。
nav{
left: -100%;
position: fixed;
}
#check:checked + nav{
left: 0px;
}
<label for="check"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="check">
<nav>
<ul><li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</nav>
如果您希望标签的顺序相同,请更改 CSS
select 或更改为:
nav{
left: -100%;
position: fixed;
}
#check:checked + label + nav{
left: 0px;
}
<input type="checkbox" id="check">
<label for="check"><i class="fas fa-bars"></i></label>
<nav>
<ul>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</nav>