【如何不使用JS实现侧边导航栏隐藏与显示 _侧边栏】

如何不使用JS实现侧边导航栏隐藏与显示

我也踩过这个坑( 5 )

已统计您的踩坑,无需重复点击

回答(3)

侧边栏

详细描述

截图

代码

<header></header>
<input id="menu" type="checkbox" name="">
<label class="menu" for="menu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
</label>
<nav></nav><!--导航栏-->
<main></main>

https://ZZsuper.github.io/JS/TASK2/JS-TASK4-nav.css

编辑于2024-11-24

时间排序

热门排序

[上海|荣耀师兄]JS-郭巍
2
：checked选择器可以选中由用户勾选的单选按钮或者复选框，要使复选框的选中与不选中和导航栏的隐藏和显示两种状态关联起来可以搭配上其他的选择器。
```
input[type="checkbox"]:checked ~ .nav {
    left: 0;
}
input[type="checkbox"]:checked ~ main {
    margin-left: 80vw;
}
```
你这里使用了:checked选择器和~普通兄弟选择器，选择了使用类选择器.nav的标签和main标签，给nav标签添加class="nav"或者去掉css里面nav前的点，使兄弟选择器直接选择nav标签。就可以达到复选框的选中与不选中和导航栏的隐藏与显示联系起来的效果。
下面给你的<nav>标签添加了.nav类，
<input id="menu" class="menu" type="checkbox" name="">
<label class="menu" for="menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</label>
<nav class="nav">
<a href="">测试</a>
<a href="">测试</a>
<a href="">测试</a>
<a href="">测试</a>
</nav>
<main></main>
查看全部>
编辑于2019-08-22
[上海|结业弟子]JS-燕赤霞
0

可以用label和input来做

查看全部>

编辑于2019-01-04
[成都|结业弟子]JS-彭力
0

可以使用Label 和 checkbox来做。

查看全部>

编辑于2019-05-12

去第页

可以使用Label 和 checkbox来做。