前端实现汉堡菜单

如果你曾经在浏览网页时看到三条线堆叠在一起，那么你就遇到了汉堡菜单。它是移动和响应式网页设计中使用的一种流行设计元素，用于创建干净、简约的界面。

单击时，这个小菜单会从屏幕的任一侧滑出，显示导航项或选项列表。当菜单打开时，汉堡菜单也会变成“X”或其他形状。

在这篇文章中，我们将向您展示如何在 CSS 中创建不同的汉堡菜单动画。让我们开始吧！

创建汉堡菜单

要创建汉堡菜单，我们首先需要创建 HTML 。由一个按钮元素和三个嵌套的 div 元素组成，每个元素代表汉堡图标的一行。

<button class="hamburger">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</button>

接下来，我们将为元素添加一些基本样式。我们将从按钮元素中删除任何默认样式，包括背景和边框颜色。

.hamburger {
    background: transparent;
    border: transparent;
    cursor: pointer;
    padding: 0;
}

然后，对于每个线元素，我们将设置背景颜色、高度、宽度和每个直线之间的间距。

.hamburger__line {
    background: rgb(203 213 225);
    margin: 0.25rem 0;
    height: 0.25rem;
    width: 2rem;
}

X

是时候使用 CSS 创建一个很酷的汉堡菜单动画了。当用户将鼠标悬停在按钮上时，我们希望线条转换为“X”形。

为了实现这一点，我们将使用? :hover ?伪类和? nth-child ?选择器来访问每一行。我们将使用? translate() 和? rotate() 函数将线条转换为 X 形状。

第一条线将在 y 轴上向下移动并旋转 45 度以创建一条 X 形状的线。第二行将通过将其不透明度设置为零而消失。最后一条线将在 y 轴上向上移动，并逆时针方向旋转 45 度以完成 X 形状。我们将通过在? translate() 和 rotate() ?函数中使用负值，将其转换为与第一行相反的方向。

.hamburger:hover .hamburger__line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger:hover .hamburger__line:nth-child(2) {
    opacity: 0;
}

.hamburger:hover .hamburger__line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

若要应用转换，我们将使用该?transition?属性。动画将使用?ease-out?计时功能运行 300 毫秒 （0.3s）。该?all?值表示将对样式更改进行动画处理，包括?transform?和?opacity?属性。

.hamburger__line {
    transition: all 0.3s ease-out;
}

通过将鼠标悬停在按钮上来尝试一下。

<button class="hamburger">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</button>

形成减号

在这种方法中，当按钮悬停在按钮上时，我们会将其变成减号。我们将使用与上一种方法相同的转换，但我们不会旋转第一行和最后一行。

相反，我们将在 y 轴上向下移动第一行，直到它到达第二行。第三条线将向上移动，直到到达第一行。然后，第二行将关闭可见性，就像在前面的方法中一样。

第一行和最后一行的?`transform`?属性将与前面的方法相同，只是我们将不再使用该?`rotate()`?函数。

.hamburger:hover .hamburger__line:nth-child(1) {
    transform: translateY(9px);
}

.hamburger:hover .hamburger__line:nth-child(2) {
    opacity: 0;
}

.hamburger:hover .hamburger__line:nth-child(3) {
    transform: translateY(-9px);
}

看看它是什么样子的！

<button class="hamburger">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</button>

要将按钮变成减号，我们可以使用另一种效果，将第一行和最后一行水平移出按钮。我们将使用该 translateX() 函数来指示位置仅在 x 轴上发生了变化。使用 translateX(-100%) ，可以将目标从左向右移出容器，而使用translateX(100%) ，我们可以做相反的事情。

这两种转换都将 opacity 属性设置为零，使第一行和最后一行不可见。因此，动画完成后，只有第二行仍然可见。

.hamburger:hover .hamburger__line:nth-child(1) {
    opacity: 0;
    transform: translateX(-100%);
}

.hamburger:hover .hamburger__line:nth-child(3) {
    opacity: 0;
    transform: translateX(100%);
}

看看这如何重现减号。

<button class="hamburger">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</button>

形成加号

在本节中，我们将向您展示另一种类型的转换。当用户将鼠标悬停在按钮上时，它会变成一个加号。为了达到这种效果，我们将第一条线向下移动，直到它与第二条线相遇，从而形成一条水平线。

然后，我们移动 y 轴上的最后一条线并将其逆时针旋转 90 度，形成加号的垂直线。最后，我们调整?opacity ?第二行，使其在动画后不可见。

.hamburger:hover .hamburger__line:nth-child(1) {
    transform: translateY(9px);
}

.hamburger:hover .hamburger__line:nth-child(2) {
    opacity: 0;
}

.hamburger:hover .hamburger__line:nth-child(3) {
    transform: translateY(-9px) rotate(-90deg);
}

查看下面的演示，了解这种方法的实际应用。

<button class="hamburger">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</button>

形成箭头

为了在按钮上创建箭头，我们使用简单的转换技术。第一条线旋转 45 度并沿 x 轴和 y 轴移动，直到它与第二条线的第一个点相交，形成箭头的顶线。然后，我们减小第一行的宽度，使其看起来更时尚。将相同的转换应用于最后一行，以创建箭头的底线。

如果需要调整箭头的位置，请随意调整传递给 translate() 函数的值。

.hamburger:hover .hamburger__line:nth-child(1) {
    transform: translate(-2px, 4px) rotate(-45deg);
    width: 16px;
}

.hamburger:hover .hamburger__line:nth-child(3) {
    transform: translate(-2px, -4px) rotate(45deg);
    width: 16px;
}

当您将鼠标悬停在按钮上时，箭头的样子如下：

<button class="hamburger">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</button>

要更改箭头的方向，请调整?translate()?函数的参数。这将确保第一行和最后一行到达第二行的末尾，并且箭头将沿相反方向旋转。

.hamburger:hover .hamburger__line:nth-child(1) {
    transform: translate(17px, 4px) rotate(45deg);
    width: 16px;
}

.hamburger:hover .hamburger__line:nth-child(3) {
    transform: translate(17px, -4px) rotate(-45deg);
    width: 16px;
}

<button class="hamburger">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</button>