前端实现汉堡菜单

发布时间:2024年01月18日

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

单击时,这个小菜单会从屏幕的任一侧滑出,显示导航项或选项列表。当菜单打开时,汉堡菜单也会变成“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>

文章来源:https://blog.csdn.net/QD_ANJING/article/details/135678913
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。