塞雷的 汉堡按钮

引用：

在哔哩哔哩有一个 up，他是 CodingStartup起码课，他是讲 粤语的哦；他的视频很多都是实现 页面 的一些功能，其中就包括这个 汉堡按钮，这是一个苹果官方网站的按钮 ：苹果官方传送门 。

这个是视频的地址，感兴趣的小伙伴，可以看看哦 使用 HTML+CSS 制作动态 Hamburger Menu ，不知道之前有没有小伙伴 分享了。

下面的展示图 ：

主要有 几个重要的地方 ：

1. 复选框 和 div 的关系：

添加 复选框 和 div：

给复选框添加一个 id，用于 label 关联 复选框用；

<input type="checkbox" id="toggle" />

<label for="toggle">
     <div class="box"></div>
</label>

这时，点击 div， 复选框 就会被选中；然后使用 css 给 复选框选中时的 div 添加样式：

.box {
    width: 100px;
    height: 100px;
    background-color: pink;
}

#toggle:checked + label .box {
    background-color: cadetblue;
}

+ 是相邻兄弟选择器，只会选中相邻后面的第一个兄弟元素。

:checked 是复选框的 选择器吧，选中时，触发的。

点击 div ，复选框 选中状态，触发:checked, 改变 div 样式，看上去，就像 div 点击自己，然后，自己发生了 变化一样（就像一个 按钮）；然后隐藏 复选框。

2. 线的动画

设置 header 标签，作为导航的背景

    <header>
        <input type="checkbox" id="toggle" />

        <label for="toggle">
            <div class="box">
                <span></span>
                <span></span>
            </div>
        </label>
    </header>

设置2条 span 为 白色背景，然后对 box 使用定位，把 汉堡按钮，调到 header 中， 居中的位置；

注意，给 2条 span 添加 定位，因为待会 变成 X 要使用到 top 这个属性；

不要使用 span 的定位去调 span 在 box 中的位置，因为后面要给 span 设置移动 和 旋转呢 ！

.box span {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;

    background-color: #fff;
}

然后，给 2条 span 分别设置 样式，使点击 div 时，变成 X 的形状。

/* 点击时添加动画 */
#toggle:checked + label .box span:nth-child(1) {
    top: 5px;
    transform: rotate(45deg);
}
#toggle:checked + label .box span:nth-child(2) {
    top: -5px;
    transform: rotate(-45deg);
}

第1条，先往下移，然后在 顺时针旋转（正值）；

第2条，先往上移动，然后 逆时针旋转 （负值）；

现在按钮是这个样子的，没有过渡的动画

3. 添加过渡动画

1，给点击时，添加过渡动画（平 变成 X）：

点击时，触发 :checked 所以我们在这个选择器后，给 span 添加过渡动画，就是 变成 X 的过程的 动画了

/* 给 span 添加过渡动画, 这个是 开始时的 过渡动画 */
#toggle:checked + label .box span {
    transition: top .3s ease, transform .3s ease .3s;
}

transition: 是过渡动画；
参数1， 过渡的动作；
参数2， 过程花费的时间；
参数3， 运动的快慢曲线（有很多中，从开到慢....）
参数4， 延迟时间（延迟多少时间在 开始动画）

这不是所有参数，只是例子中使用到的参数 。
设置2个 动作时，用 , 逗号分隔开，位置第一个的动作先发生 。

这时是这个样子的：

2，给还原时，添加过渡动画 （X 变 平）：

就给 span 标题添加就好了

.box span {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background-color: #fff;

    /* 还原时的过渡动画 */
    transition: transform .3s ease, top .3s ease .3s;
}

4.添加 折叠导航

在 header 中添加 ul 无序列表，点击 汉堡按钮，折叠的 导航也跟着打开。

这个的 导航折叠 是使用了 transform: scaleY() 收缩这个属性，让 导航的 Y 轴收缩为 0 ，这样就隐藏；显示呢，就设置 1，还原原来的样子 。（我以前都是使用 display: none，学到了，这样设置动画时，更好看 ）。

    <header>
        <input type="checkbox" id="toggle" />

        <label for="toggle">
            <div class="box">
                <span></span>
                <span></span>
            </div>
        </label>

        <div class="nav-list">
            <ul>
                <li>Mac</li>
                <li>iPad</li>
                <li>iPhone</li>
                <li>Watch</li>
                <li>TV</li>
            </ul>
        </div>
    </header>

css 部分：

.nav-list {
    position: absolute;
    top: 40px;
    width: 100vw;
    height: 100vh;
    background-color: #333;
    /* 隐藏 */
    transform: scaleY(0);
    transform-origin: 50% 0;
    transition: all 0.5s ease;
}

设置为 定位，top 为 40， 就是 header 的高度；占满整个屏幕，然后设置为 隐藏状态 。

当点击 按钮 时，就显示 导航

#toggle:checked ~ .nav-list {
    transform: scaleY(1);
    background-color: black;
}

基本就是这样 。

视频教程来源 哔哩哔哩 CodingStartup起码课， 再这里只是做一个分享 。