如何创建在 Divi 中单击时展开的圆形图标菜单

圆形图标菜单是向 Divi 站点添加简单菜单的优雅解决方案。 这种风格的菜单非常直观，作为移动设备的固定菜单非常有效。 今天，我们将展示如何在Divi中以一种真正突出Divi Builder强大设计功能的方式创建圆形图标菜单。 我们将提供一个简单的 JavaScript 代码段来在点击时打开和关闭菜单。

让我们开始吧

抢先看

这是我们将要构建的圆形图标菜单的快速浏览。

免费下载圆形图标菜单布局

要从本教程中着手设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们进入教程好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有，请安装并激活已安装的 Divi 主题（如果不使用 Divi 主题，请安装并激活 Divi Builder 插件）。
2. 在 WordPress 中创建一个新页面，并启用 Divi Builder 在前端（可视化构建器）编辑页面。

在本教程中，我们将使用来自模糊模块的 Divi 内置图标，因此不需要任何外部资产。

之后，您将有一个空白画布开始在 Divi 中进行设计。

第1部分

启用 Divi Builder 以在前端编辑页面后，将一列行添加到默认常规部分。

然后打开行设置并添加以下填充：

填充：300px 顶部

这只是为圆形菜单项提供一些空间以在单击时弹出。

使用 Blurb 模块创建菜单图标

模糊 #1

行填充到位后，向列添加一个模糊模块。 这将是我们将添加以组成圆形图标菜单的 5 个总简介中的第一个。 我们将把这个称为blurb #1。

然后通过取出标题和正文来更新简介内容。 然后将图标添加到简介中，如下所示。

使用图标：是
图标：见截图

接下来，我们将更新设计设置如下：

图标颜色：#29a1f2
圆圈图标：是
圆圈颜色：#222222
显示圆形边框：是
圆形边框颜色：#29a1f2
使用图标字体大小：是
图标字体大小：25px
正文文字大小：20px
边距：0px

除了为圆形图标设置样式外，我们还添加了正文文本大小。 没有正文文本，但是当我们使用 em 长度单位（相对于父正文文本大小）使用变换翻译来分隔菜单项/模糊时，这将在以后派上用场。 稍后会详细介绍。

之后，取出默认的图像/图标动画。

图像/图标动画：无动画

然后将此模块的 Z 索引设置为 1，以便它位于最终将位于其后面的其他模块之上。

Z指数：1

最后，通过将以下自定义 CSS 添加到 Blurb 图像中，去掉图标下的默认底部边距。

margin-bottom: 0px;

模糊 #2

要创建第二个简介，只需复制简介 #1。

然后打开新模糊（模糊 #2）的设置并更改图标并将 Z 索引设置回默认值 (0)。

之后，让我们使用变换比例缩小图标，如下所示：

变换比例：70%

创建模糊 #3、#4 和 #5

接下来的三个宣传片可以通过复制宣传片 #2 并更新每个宣传片的图标来创建。

将 Blurbs 堆叠在相同的绝对位置

我们菜单的默认状态将所有的宣传语都处于绝对位置，四个菜单项宣传语堆叠在主汉堡菜单图标宣传语后面。 要使我们的简介处于相同的绝对位置，请使用多选功能（按住 ctrl/cmd 并单击每个）来选择所有五个简介模块。 然后打开所选宣传语之一的设置以同时更新所有 5 个宣传语的元素设置。

然后将以下自定义 CSS 添加到主元素：

position: absolute !important;
bottom: 20px;
left: 20px;

这将定位在行的左下角。

使用 Transform Translate 定位菜单图标

一旦所有的模糊定位为默认状态，我们就可以开始定位单击状态的菜单项（单击主菜单按钮后它们将最终定位）。 为此，我们可以使用 Divi 构建器中的 transform translate 属性。 Divi 构建器中没有可用的单击状态（如悬停），因为这是由 JavaScript 处理的。 因此，我们现在要将菜单项放置在我们希望它们点击的位置。 然后我们将使用 Javascript 在单击主菜单按钮时打开和关闭该位置。

我们希望保持第 1 条模糊，因为它是主菜单按钮。 但是，我们确实想要移动模糊 #2、#3、#4 和 #5。 由于我们的宣传语现在堆叠在可视化构建器中，让我们部署线框模式来更新每个宣传语的位置。

位置模糊 #2

打开模糊 #2 的设置并更新以下内容：

变换 平移 Y 轴：-10em

这是blurb #2 的新位置。

位置模糊 #3

打开模糊 #3 的设置并更新以下内容：

变换 平移 Y 轴：-8.6em
Transform Translate X 轴：5em

这是blurb #3 的新位置。

位置模糊 #4

打开模糊 #4 的设置并更新以下内容：

变换 平移 Y 轴：-5em
Transform Translate X 轴：8.6em

这是blurb #4 的新位置。

位置模糊 #5

打开模糊 #5 的设置并更新以下内容：

变换平移 Y 轴：0px
Transform Translate X 轴：10em

这是blurb #5 的新位置。

将自定义 CSS 类添加到 Blurbs

为了让我们的 JavaScript 正常工作，我们需要添加一些 CSS 类，这些类将用作附加样式和功能的选择器。

将 CSS 类添加到 Blurb #1

在线框视图模式下，打开模糊 #1 的设置并添加以下 CSS 类：

CSS 类：transform_target

将 CSS 类添加到 Blurbs #2、#3、#4 和 #5

其他四个模糊将共享相同的 CSS 类，因此我们可以使用多选功能选择 Blurb #2、#3、#4 和 #5 并更新所有四个的 CSS 类，如下所示：

CSS 类： has-transform toggle-transform-animation

请注意，有两个由空格分隔的 css 类。

使用代码模块添加外部 CSS 和 JavaScript

一旦我们的 CSS 类被添加到简介中，我们就可以使用代码模块将我们的代码添加到页面中。 为此，在blurb #5 下添加一个代码模块。

然后将以下代码粘贴到代码模块中：

<style>
  .has-transform, .transform_target .et-pb-icon {
    transition: all 400ms ease-in-out;
  } 
  .toggle-transform-animation {
    transform: none !important;
  }
  .transform_target {
    cursor: pointer;
  }
  .toggle-active-target.et_pb_blurb .et-pb-icon {
    background-color: transparent;
  }
</style>

这是用于与 jQuery 代码结合使用的外部 CSS。

<script>
(function($) {
  $(document).ready(function(){
    $('.transform_target').click(function(){
      $(this).toggleClass('toggle-active-target');
      $('.has-transform').toggleClass('toggle-transform-animation');   
    });    
  });
})( jQuery );   
</script>

这是 JavaScript 需要在单击菜单按钮时使圆形图标菜单项向外延伸。

确保将style标签包裹在 CSS 周围，将script标签包裹在 JavaScript/jQuery 周围。

检查实时页面上功能的最终结果。

添加菜单项 URL

由于这是一个菜单，四个菜单项将需要链接/URL。 为了添加每个菜单项所需的 URL，打开 4 个菜单项中每一个的模糊模块设置并添加一个模块链接 URL。

使菜单按钮具有粘性（或固定）

由于此菜单对于移动设备来说小而直观，因此您可能希望使菜单具有粘性，以使其固定在浏览器的左下角。

为此，请使用多选功能选择所有五个模糊，然后通过将位置值“绝对”替换为“固定”来更新主元素中的自定义 CSS。

position: fixed !important;
bottom: 20px;
left: 20px;

现在菜单将固定在浏览器窗口的左下角。

要确保菜单位于页面上其他内容的上方，请按如下方式更新该行的 z 索引：

Z指数：11

然后取出行的填充：

填充：0px 顶部，0px 底部

最终设计

这是带有预制布局的固定圆形图标的最终设计。

这是在手机上。

如何轻松调整菜单大小和间距

如前所述，菜单是使用 em 长度单位设计的，用于在 x 和 y 轴上定位菜单项（使用变换平移）。 em 长度单位是相对于父正文文本大小的大小。 因此，由于我们的每个简介模块都具有相同的 20px 正文大小，我们可以使用多选来一次更改所有简介的正文。

这将根据需要增加或减少菜单项之间的间距。

您也可以对 Icon 字体大小执行相同操作。 只需使用多选一次即可调整所有菜单项的图标字体大小。

最后的想法

谁知道在页面上添加一个固定的圆形图标菜单可以用 Divi 这么简单。 它也是移动设备的完美菜单类型！ 当然，需要一些自定义代码片段，但是您可以使用可视化构建器设计和定位菜单项的单击状态这一事实非常酷。 不要忘记探索不同的颜色、大小和悬停设计，这些设计可以轻松使菜单与您自己的网站相匹配。

我期待在评论中收到您的来信。

干杯!