如何构建 MouseOver 导航幻灯片效果

您是否曾经在项目中使用过 Slider Revolution wordpress 插件？如果答案是“是”，您可能已经注意到出现在插件配置页面右上角的迷你工具栏。

最初，只有图标是可见的，使整个东西保持美观和紧凑。然后，每次将鼠标悬停在图标上时，其相关文本都会以平滑的滑入动画显示。

在今天的练习中，让我们从该效果中获取灵感并构建类似的东西。以下是我们将努力的方向：

See the Pen Quick Tip: How to Animate a Menu on Hover by Envato Tuts+ (@tutsplus) on CodePen.

我们将很快完成，首先写出我们的标记，用 css 设置样式，最后添加一些 javascript 行为。在收工之前，我们还要看一下纯 CSS 的方法。让我们开始吧！

1. 从页面标记开始

我们将从包含标题和无序列表的标题开始。每个列表项都将包含一个按钮。此元素将用作 svg 图标及其相应文本的包装器。

这是所需的标记：

<header>
  <h1>Mini Toolbar</h1>
  <ul>
    <li>
      <button>
        <svg>...</svg>
        <span>Pages</span>
      </button>
    </li>
    <li>
      <button>
        <svg>...</svg>
        <span>Collection</span>
      </button>
    </li>
    <li>
      <button>
        <svg>...</svg>
        <span>Appearance</span>
      </button>
    </li>
    <li>
      <button>
        <svg>...</svg>
        <span>Options</span>
      </button>
    </li>
    <li>
      <button>
        <svg>...</svg>
        <span>Search</span>
      </button>
    </li>
  </ul>
</header>

此处使用的图标取自Envato Elements。您可能会认出这个图标集，因为我已经在之前的教程中将它用作 SVG 精灵的一部分。

2. 用 CSS 定义样式

标头将充当弹性容器。它的孩子将垂直居中并分布在主轴上。我们还将给它一个最大宽度并使其水平居中：

/*CUSTOM VARIABLES HERE*/

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1000px;
  padding-left: 15px;
  margin: 0 auto;
  border-radius: 5px;
  background: var(--blue);
}

列表和按钮都将是具有垂直居中内容的弹性容器：

header ul,
header button {
display: flex;
align-items: center;
}

所有按钮都将具有不同的颜色，并且某些颜色值将与 Slider Revolution 的迷你工具栏的值匹配。当一个按钮被悬停在上面时，它的颜色会稍微变亮，这要归功于 CSS 的原生 filter()功能。

我们也会给他们overflow: hidden，因为我们想在幻灯片动画期间隐藏他们溢出的内容：

/*CUSTOM VARIABLES HERE*/

header button {
  padding: 15px;
  overflow: hidden;
  transition: filter 0.25s;
}

header li:nth-child(1) button {
  background: var(--green);
}

header li:nth-child(2) button {
  background: var(--lightblue);
}

header li:nth-child(3) button {
  background: var(--gray);
}

header li:nth-child(4) button {
  background: var(--red);
}

header li:nth-child(5) button {
  background: var(--orange);
}

header button:hover {
  filter: brightness(110%);
}

SVG 图标

SVG 将具有白色。而且，如前所述，文本最初将被隐藏。当我们将鼠标悬停在父按钮上时，它将变得可见：

/*CUSTOM VARIABLES HERE*/

header button svg {
  fill: var(--white);
}

header button span {
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease-out;
}

header button:hover span {
  margin-left: 15px;
  opacity: 1;
  visibility: visible;
}

3. JavaScript：监听鼠标事件

当 dom 准备好后，我们将抓取所有标题按钮。然后，我们将遍历它们并执行以下操作：

抓住他们的文本元素并计算它的默认宽度。
然后，将该元素的宽度设置为 0。
每次我们将鼠标悬停在按钮上时，我们都会重置其文本元素的默认宽度。
然后，每次我们停止将鼠标悬停在按钮上时，我们都会将其宽度设置为 0。

这是完成此行为的 javaScript：

const buttons = document.queryselectorAll("header button");

buttons.forEach(el => {
  // 1
  const span = el.lastElementChild;
  const width = span.offsetWidth;
  // 2
  span.style.width = 0;
  // 3
  el.addeventListener("mouseenter", () => {
    span.style.width = `${width}px`;
  });
  // 4
  el.addEventListener("mouseleave", () => {
    span.style.width = 0;
  });
});