响应式导航条

目标

menu.gif

涉及知识点

• label标签的for属性的作用
• css3 checked选择器
• css3 ~ 兄弟选择器
• css3 伪元素
• flex布局
• rem

label标签的for属性

label标签的for属性规定 label 与哪个表单元素绑定。

应用：扩大input框的响应区域

html代码如下：

姓名:


同意:
上面代码的效果如下：

check.gif

上面的代码产生的结果就是：用鼠标点击label区域时，也会让input框处于激活状态。而其要点就是：

1. label要设置for属性
2. input的id值与label的for属性保持一致。

这种用法是非常常见的，如下是在网络中截取的一个例子。

image.png

css3 selected 和 ~ 兄弟选择器

下面是效果图。

check1.gif

对应的代码如下：

.menu-content .menu-link{margin:5px;}
.drawer:checked ~ .menu-content .menu-link{
    color:red;
}


      三条横线
       
       

           js
           html
           css
       

对如上代码解释如下：

1. :checked是一个CSS 伪类选择器表示任何处于选中状态的radio(), *checkbox () 或("select") 元素中的option *HTML元素("option"))。具体可以查看这里。

2. ~ 通用兄弟选择器。在使用 ~ 连接两个元素时,它会匹配第二个元素,条件是它必须跟(不一定是紧跟)在第一个元素之后,且他们都有一个共同的父元素 。具体可以查看这里。 注意它与+相邻兄弟选择器的区别。

3. 把这两个选择器合起来如下。

   
   
   

   image.png
   
   

   为方便理解，我们可以按从左向右的阅读顺序给它们取个简单的名字:
   .drawer:chekcked是一个选择器，可记为A。.menu-content可记为B，.menu-link记为C。则上面的选择器相当于：

A~B C
注意BC之时有一个空格，表示后代选择器。

这一条规则的含义是：当input处于选中状态时，就它的“侄子们“（.menu-content是它的兄弟，则a标签就是它的侄子啦）的颜色设为红色。

4. input的checked状态可以通过用户去点击label（三条横线）来进行设置。你可以想一想，这个input是不是可以隐藏起来了？ 其实我们只是把它放在页面上做为一个钩子来使用，而不需要它显示出来。

css3 伪元素 来实现三条横线的效果

我们的目标是实现类似于如下效果

image.png

当然，我们有很多的方法来实现，如：

• 让ui设计师以图片的格式输出
• 通过字体图标iconfont来实现
• 通过css样式自己来设置

通过css来设置也可以有很多实现思路。最笨的方法是：一个div包含三个横线，而每一个横线可以通过设置元素的宽度，高度及背景颜色来实现，而它们的位置可以通过绝对定位来调整。这个方法不采用。

下面来介绍我采用的方法。
思路是：
第一条横线：通过设置上边框来实现。
第二条横线：通过添加伪元素，设置其背景颜色来实现。
第三条横线：通过设置下边框来实现

image.png

.drawer-close{
      box-sizing: border-box;
      width: 1.2rem;height:1.2rem;
      border-top:3px solid #333;
      border-bottom:3px solid #333;
      position: relative;
}
.drawer-close::after{
     content: "";
     width:100%;height:3px;
     background-color: #333;position: absolute;
     top:50%;left:0;
     transform: translateY(-50%);
}

after伪元素

CSS伪元素::after用来创建一个伪元素，做为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
注意：

1. 它用来创建一个伪元素，并选中它。
2. 伪元素，故名思义它不是真正的元素：不能对它进行dom操作。但可以进行css设置。
3. 与after对应的，还有一个比较常用的伪元素是before

image.png

下面详细说明一下这个选择器的效果;

.drawer-close::after{
     position: absolute;/*隐式转成块级元素，让width和height可以生效；方便定位*/
     width:100%;height:3px; 
     content: ""; /*是所有伪元素必不可少的属性，这里设置为空*/
     background-color: #333;
     left:0;
     transform: translateY(-50%);top:50%; /*这两条规则与absolute一起实现垂直居中效果*/
}

整体来看，我们只通过一个label标签及伪元素选择器就实现一个稍微复杂的效果。这是比较好的一种做法。