Pure CSS (1) Hamburger fold-out menu

源案例在线预览

Code & 演示原地址： 链接

代码复现（有修改）

CSS

<style>

  * {
    padding: 0;
    margin: 0;
  }

  body {
    background: #232323;
    color: #cdcdcd;
    font-family: "Avenir Next", "Avenir", sans-serif;
  }

  nav {
    width: 400px;
    height: 100vh;
    overflow: hidden;
  }

  #menu li {
    font-size: 22px;
    padding: 10px 0;
    list-style: none;
  }

  #menu li a {
    text-decoration: none;
    color: #232323;
    transition: color 0.3s ease;
  }

  #menu li a:hover {
    color: tomato;
  }

  #menu {
    width: 400px;
    height: 100vh;
    background: #ededed;

    margin: -80px 0 0 -50px;
    padding: 100px 0 0 50px;

    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
  }


  #menuToggle {
    margin: 50px 0 0 50px;
  }

  #menuToggle span {
    display: block;
    width: 32px;
    height: 5px;
    background: #cdcdcd;
    border-radius: 3px;
    margin-bottom: 5px;

    position: relative;
    z-index: 2;

    transform-origin: 0;

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    opacity 0.4s ease;
  }

  #menuToggle input {
    width: 40px;
    height: 30px;
    cursor: pointer;
    opacity: 0;

    position: absolute;
    z-index: 3;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
  }

  #menuToggle input:checked ~ #menu {
    transform: none;
  }

  #menuToggle input:checked ~ span {
    background: #232323;
  }

  #menuToggle input:checked ~ span:nth-child(2) {
    transform: rotate(45deg) translate(-3px);
  }

  #menuToggle input:checked ~ span:nth-child(3) {
    opacity: 0;
    transform: scale(0.2, 0.2);
  }

  #menuToggle input:checked ~ span:nth-child(4) {
    transform: rotate(-45deg) translate(-1px,-1px);
  }
</style>

Html

<nav>
  <div id="menuToggle">
    <input type="checkbox"/>
    <span></span>
    <span></span>
    <span></span>
    <ul id="menu">
      <li><a href="javascript:;">Home</a></li>
      <li><a href="javascript:;">About</a></li>
      <li><a href="javascript:;">Info</a></li>
      <li><a href="javascript:;">Contact</a></li>
      <li><a href="javascript:;">Show me more</a></li>
    </ul>
  </div>
</nav>

通过案例学习到的新知识

伪类选择器

1. 伪类选择器:first-child & :last-child : 前者必须保证前前面没有元素，后者保证后面没有元素，否则无法有效选中。
2. 利用type为checkbox的input标签，通过:checked伪类选择器，来模拟按钮的点击事件，对指定元素添加样式，不必在另写js代码来添加样式。
3. :hover伪类选择器，只能影响同级、子级元素。

CSS动画属性（部分）

1. transform：向元素应用2D或3D转换。该属性允许对元素进行旋转、缩放、移动或倾斜。

   1. rotate(…deg): 元素旋转。Param为旋转度数。
   2. scale(x, y): 元素扩大或缩小。Param1：x轴缩放系数。Param2：y轴缩放系数。
   3. translate(x, y): 元素位置移动。Param1：x轴移动量。Param2：y轴移动量。

2. transition：监听属性值变化，并设置过渡效果，在属性之变动改变时触发。

   1. transition-property：规定设置过渡效果的 CSS 属性的名称。
   2. transition-duration：规定完成过渡效果需要多少秒或毫秒。
   3. transition-timing-function：规定速度效果的速度曲线。
   4. transition-delay：定义过渡效果何时开始。

3. animation：搭配@keyframse定义的一组动画指令集合，在duration时间的不同百分比时触发对应时间的CSS样式变动。具体更细节的值设定可以参考这里：Click me

4. transform-origin：设置旋转元素的基点位置。适用transform: rotate(…deg)时。

margin-top失效

根据规范，一个盒子如果没有上填充(padding-top)和上边框(border-top)，那么盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。