每天一个小技巧：变形汉堡按钮（Hamburger Menu） HTMLCSSJS

汉堡按钮（Hamburger menu）常用于移动端网站 展开/收起 导航，如果在点击按钮时再增加一些过渡动画则会显得更加生动有趣。今天我们就快速实现一个带有过渡动画的汉堡按钮。效果如图：

HTML

html 结构很简单，两个 div 足以:

div.menu 代表按钮，div.hamburger 代表按钮中的线段。但是一个 div 如何显示 3 条线段？有同学应该想到了，可以用 ::before、::after 伪元素。

CSS

为了让代码更简洁，选择使用 Sass 书写样式。

定义变量

首先我们需要定义一些变量，减少重复的参数。写样式的时候也可以像写组件那样去提炼配置，通过配置去修改、扩展。比如，线段的尺寸、位置都可以通过按钮尺寸 $menu-size 计算得到，这样一旦我们需要修改按钮尺寸就只需要修改 $menu-size 这一个参数就行了。

变量：

样式

按钮样式：

常规操作，没啥好讲的...

线段样式：

注意点：

1. 使用 transition 设置动画的过渡时间
2. ::before、::after 伪元素是相对于 div.hamburger 进行绝对定位（绝对定位的定义是：相对于最近的非 static 定位的祖先元素的进行偏移。而不是 很多同学印象中的相对于 position:relative 的祖先元素进行定位）

激活状态：

当点击按钮后通过 Javascript 给 div.menu 添加 active 的 class，表示按钮进入激活状态：

注意点：

1. 隐藏线段 2 不能直接 display:none 或者 visibility: hidden，这样会导致使用伪元素实现的线段 1、3 都被隐藏，而是通过将背景色设置为透明实现
2. 给 ::before，::after 设置 top: 0 相当于把线段 1、3 移到按钮中间，然后再进行旋转
3. 设置其他角度也可以达到最后变成 x 的效果，比如：&::after {transform: rotate(-45deg)}，只不过中间变换的过程会有所区别
4. 对中间变换过程有疑惑的同学建议将 transition 时间调长，仔细观察

JS

最后，监听按钮的点击事件，toggle 激活状态：

好了，大功告成！

本文 Demo 参考：Codepen Trick by Day (2020-07-07) Transforming Hamburger Menu