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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/jnshu_it/article/details/85334678

详细描述

css task13 中有需要写侧边导航栏，但是一般做css任务的时候还没有学习JS，那么不使用JS可以实现这种效果吗

截图

效果为：点击菜单按钮侧边导航栏划出，再次点击隐藏

代码

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

HTML结构

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

核心思想为：input[type="checkbox"] + label + transition（animation）;
导航栏的隐藏与显示是两种状态，如果不用JS如何让其在两种状态间切换呢？
让导航栏的两种状态 (A\B) 与其它的 能让鼠标点击控制的状态 (a\b) 联系起来:A==a, B==b；
label 与 input复选框 联系（css-task10），复选框的  选中与不选中  和 导航栏的 隐藏与显示 联系起来。

[上海分院|内门弟子] JS-郭巍

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