今天完成的事情：使用css写侧边导航，了解常用css命名
明天计划的事情：完成任务13深度思考
遇到的问题：使用相邻兄弟选择器是，选择失败没有效果。

问题产生原因：选择的元素并不与当前元素相邻，有间隔。相邻兄弟选择器仅仅选额当前元素相邻的那个合乎规则的元素。

解决办法：使用兄弟选择器，选择当前元素后面的所有合乎规则的兄弟元素。~

收获：

一、纯css写可折叠的侧边导航栏

怎样实现首页的侧拉菜单，保证点击页面顶部左边的按钮后向右显示出来，再次点击又向左隐藏回去。这里对我来说是个难点，在网上查找了很多的资料，几乎全是使用js或者jquery来做的，但是这两个我都还没学，开始的时候打算用bootstrap的折叠，无论怎么修改，都没办法横向展开，最后去看了别人的日报，用纯css实现，直接用checkbox复选框来做，有了大致的方向，又开始继续去慢慢摸索，这个地方花了我很长时间去完成，完全没有那方面的知识，只希望通过这里的一个案例，对侧拉菜单有了一定了解后，以后再遇到需要做出相应的功能的时候自己能做出来。

首先先对标签label进行了解，其实这个标签在做任务10的时候我就用到过，

<label>标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

再通俗点说，就是用户鼠标点击控件相关的文本，也会触发控件，让它选中或取消。

大致思路：

1.寻找点击可以触发时间的标签。

2.如何隐藏和展开左侧导航栏。

3.在展开左侧导航栏中的同时，使右侧主体内容随之移动。

具体操作：

1.寻找点击可以触发时间的标签。

怎样实现首页的侧拉菜单，保证点击页面顶部左边的按钮后向右显示出来，再次点击又向左隐藏回去。这里对我来说是个难点，在网上查找了很多的资料，几乎全是使用js或者jquery来做的，但是这两个我都还没学，开始的时候打算用bootstrap的折叠，无论怎么修改，都没办法横向展开，最后去看了别人的日报，用纯css实现，直接用checkbox复选框来做，有了大致的方向，又开始继续去慢慢摸索，这个地方花了我很长时间去完成，完全没有那方面的知识，只希望通过这里的一个案例，对侧拉菜单有了一定了解后，以后再遇到需要做出相应的功能的时候自己能做出来。

首先先对标签label进行了解，其实这个标签在做任务10的时候我就用到过，

<label>标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

再通俗点说，就是用户鼠标点击控件相关的文本，也会触发控件，让它选中或取消。

2.如何隐藏和展开左侧导航栏。

使用fixd定位使其脱离文档流，然后将其宽度设为0，用：checked控制其宽度变为50%，用transition控制其展开效果。

3.在展开左侧导航栏中的同时，使右侧主体内容随之移动。

使用transform的移动效果使主体移动。

html结构

<div class="div--ovflow"> /*在主体移动后切除多余部分，防止出现横向滚动轴*/

    <input class="input--nav" type="checkbox" id="nav-checkbox">

    <div class="nav-left" id="nav"></div> /*侧边导航栏*/

    <div class="go-right"></div> /*主体结构*/

</div>

scss代码

.div--ovflow{

  width: 100%;

  max-width: 768px;

  min-width: 320px; 

  overflow: hidden; /*在主体移动后切除多余部分，防止出现横向滚动轴*/

}

/*隐藏input*/

.input--nav{

  display: none;

}

/*侧边导航栏*/

.nav-left{

  position: fixed;/*使侧边导航栏脱离文档流*/

  z-index: 2; /*防止主体遮盖导航栏*/

  width: 0;

  height: 100vh;

  max-width: 384px;

  background: $white-color;

  transition:width 2s; 

}

/* input控制*/

input:checked ~ .go-right{

  transform: translateX(50%);/*控制主体移动*/

}

input:checked ~ .nav-left{

  width: 50%;

  max-width: 384px;/*控制展开侧边导航栏*/

}

/*右侧主体*/

.go-right{

  height: 100vh;

  background: $background-color;

}

任务进度：css-13

任务开始时间：2018年5月17日

禅道：http://task.ptteng.com/zentao/project-task-692.html