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

logo

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

demo

HTML

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

<div class="menu">
<div class="hamburger"></div>
</div>

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

CSS

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

定义变量

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

变量：

$menu-size: 300px; // 按钮尺寸
$line-width: $menu-size * 0.66; // 线段宽度
$line-height: $menu-size * 0.1; // 线段高度
$line-spacing: $menu-size * 0.22; // 线段间距
$line-color: #f44336; // 线段颜色

样式

按钮样式：

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

.menu {
// 水平、垂直居中
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
// 宽高
width: $menu-size;
height: $menu-size;
// 其他
cursor: pointer;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 6%;
}

线段样式：

.hamburger {
// 水平、垂直居中
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
// 线段样式
&,
&::before,
&::after {
content: "";
position: absolute;
width: $line-width;
height: $line-height;
background: $line-color;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
// 过渡时间
transition: 0.5s;
}
// 线段1位置
&::before {
top: -$line-spacing;
}
// 线段3位置
&::after {
top: $line-spacing;
}
}

激活状态：

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

.menu.active {
.hamburger {
// 隐藏线段2
background-color: transparent;
box-shadow: none;
// 线段1 旋转定位
&::before {
top: 0;
transform: rotate(45deg);
}
// 线段3 旋转定位
&::after {
top: 0;
transform: rotate(135deg);
}
}
}

JS

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

const menu = document.querySelector(".menu");
menu.addEventListener("click", () => {
menu.classList.toggle("active");
});

好了，大功告成！

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

以上是 每天一个小技巧：变形汉堡按钮（Hamburger Menu） 的全部内容， 来源链接： utcz.com/a/30697.html

回到顶部