如何使用 Divi 的 Theme Builder 创建移动折叠嵌套菜单

已发表: 2019-12-12

不久前，我们分享了一个移动菜单技巧，可帮助您创建可折叠的嵌套菜单。 我们知道你们中的许多人都使用过它，但是使用新的 Divi Theme Builder，方法变得略有不同。 在今天的教程中，我们将向您展示如何将移动折叠效果应用于 Divi Theme Builder 内的菜单模块。 本教程分为三个主要部分：

  • 设置菜单并为菜单项分配正确的类别
  • 使用主题生成器和菜单模块构建菜单
  • 在 Theme Builder 中添加自定义代码

您也可以免费下载模板 JSON 文件！ 让我们开始吧。

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

移动的

嵌套菜单

桌面

嵌套菜单

免费下载全局标题设计

重要提示：将 JSON 文件下载并上传到您的主题构建器后，您仍然需要使用正确的 CSS 类手动设置菜单 + 添加带有 CSS 和 JQuery 代码的代码模块（本文的第 1 步和第 3 步） .

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

下载文件
免费下载

免费下载

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

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

订阅我们的 YouTube 频道

1. 设置您的菜单

添加菜单项和子菜单项

您需要做的第一件事是创建菜单。 添加您选择的子项目。

嵌套菜单

添加 CSS 类选项

添加菜单项后，您可以通过单击“屏幕选项”并启用“CSS 类”来启用 CSS 类选项。

嵌套菜单

将 CSS 类添加到包含子菜单项的一级菜单项

继续向包含子菜单项的第一级菜单项添加 CSS 类。 在此示例中，这意味着将 CSS 类添加到“服务”和“投资组合”菜单项。

  • CSS 类：一级

嵌套菜单

将 CSS 类添加到二级菜单项和保存菜单

然后，为菜单中的二级菜单项分配不同的 CSS 类。 确保仅将此 CSS 类添加到二级菜单项（以防添加更多级别）。 在本教程的后面，我们将使用这个 CSS 类和我们分配给第一级菜单项的那个类来创建折叠嵌套菜单。

  • CSS 类：二级

嵌套菜单

2.转到Divi Theme Builder并开始构建全局标题

转到 Divi 主题生成器

本教程的下一部分重点介绍创建页眉设计。 如果您想让嵌套技术应用于您已经构建的标题（使用菜单模块），您可以跳过此步骤并转到教程的最后一部分。 如果要重新创建设计，请继续执行以下步骤。 转到 Divi 主题生成器。

嵌套菜单

开始构建全局标题

接下来开始构建您的全局标题。

嵌套菜单

部分设置

间距

在模板编辑器中，您会注意到一个部分。 打开该部分并删除所有默认的顶部和底部填充。

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

嵌套菜单

Z索引

也增加部分的 z 索引。

  • Z指数：99999

嵌套菜单

添加新行

列结构

继续使用以下列结构向该部分添加新行：

嵌套菜单

浆纱

在不添加任何模块的情况下，打开行设置并允许行占据屏幕的整个宽度。

  • 使用自定义装订线宽度：是
  • 天沟宽度：1
  • 均衡柱高：是
  • 宽度：100%
  • 最大宽度：100%

嵌套菜单

间距

接下来删除所有默认的顶部和底部填充。

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

嵌套菜单

主要元素

通过向行的主要元素添加一行 CSS 代码，确保所有模块在较小的屏幕尺寸上彼此相邻。 

display: flex;

嵌套菜单

第 1 栏

间距

然后，打开第 1 列设置并添加一些自定义顶部和底部填充。

  • 顶部填充：20px
  • 底部填充：20px

嵌套菜单

边界

也添加一些边界半径。

  • 右上角：100px
  • 右下角：100px

嵌套菜单

盒子阴影

并通过添加一个微妙的框阴影来完成第 1 列的设置。

  • 框阴影水平位置：20px
  • 框阴影模糊强度：50px
  • 阴影颜色：rgba(0,0,0,0.15)

嵌套菜单

第 2 栏

间距

接下来打开第二列的设置并添加一些顶部和底部填充。

  • 顶部填充：20px
  • 底部填充：20px

嵌套菜单

第 3 栏

渐变背景

转到下一列和最后一列。 添加渐变背景。

  • 颜色 1：#26c699
  • 颜色 2：#abe02f
  • 梯度方向：116deg

嵌套菜单

间距

接下来添加一些自定义的顶部和底部填充。

  • 顶部填充：20px
  • 底部填充：20px

嵌套菜单

边界

然后，转到边框设置并进行以下更改：

  • 左上角：100px
  • 左下角：100px

嵌套菜单

盒子阴影

通过添加框阴影完成列设置。

  • 框阴影水平位置：-26px
  • 框阴影垂直位置：0px
  • 阴影颜色：#d2ff0c

嵌套菜单

将图像模块添加到第 1 列

上传标志

是时候添加模块了，从第 1 列中的图像模块开始。上传您的徽标。

嵌套菜单

结盟

接下来更改模块的图像对齐方式。

  • 图像对齐：居中

嵌套菜单

浆纱

通过更改不同屏幕尺寸的宽度来完成模块的设置。

  • 宽度：120px（桌面），80px（平板和手机）

嵌套菜单

将菜单模块添加到第 2 列

选择菜单

在第 2 列中，我们唯一需要的模块是菜单模块。 选择您在本教程的第一部分中创建的菜单。

嵌套菜单

删除背景颜色

接下来删除模块的背景颜色。

嵌套菜单

布局

然后，更改布局设置。

  • 风格：居中
  • 下拉菜单方向：向下

嵌套菜单

菜单文字

也为菜单文本设置样式。

  • 菜单字体：蒙特塞拉特
  • 菜单字体粗细：中等
  • 菜单文字颜色：#000000
  • 菜单文字大小：13px
  • 菜单字母间距：1px

嵌套菜单

下拉式菜单

继续在下拉菜单设置中更改一些颜色。

  • 下拉菜单背景颜色：#ffffff
  • 下拉菜单行颜色：#000000

嵌套菜单

图标

并通过更改图标设置中的汉堡菜单图标颜色来完成模块的设置。

  • 汉堡菜单图标颜色：#000000

嵌套菜单

将文本模块添加到第 3 列

添加内容

转到下一个也是最后一个模块，它是第 3 列中的文本模块。添加一些您选择的副本。

嵌套菜单

添加链接

接下来添加模块的链接。

  • 模块链接网址：#

嵌套菜单

文字设置

转到设计选项卡并相应地更改文本设置：

  • 文字字体：蒙特塞拉特
  • 文字字体粗细：半粗体
  • 文字颜色：#ffffff
  • 文字大小：16px
  • 文本行高：1em
  • 文本对齐：居中

嵌套菜单

间距

通过添加一些 topmargin 来完成模块的设置。

  • 上边距：10px

嵌套菜单

3. 使用代码模块向菜单添加功能

将代码模块添加到第 2 列

完成标题的设计后，就可以添加自定义代码，将移动菜单转换为可折叠的嵌套菜单。 将代码模块添加到第二列（或其他任何地方）。

嵌套菜单

插入 CSS 和 JQuery 代码

然后，添加 CSS 和 JQuery 代码。 确保将 CSS 代码放在 style 标签之间，将 JQuery 代码放在 script 标签之间。 

.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after{
content: '\4d';
}
.second-level {
display: none;
}
.reveal-items {
display: block;
}
.et_mobile_menu {
margin-top: 20px;
width: 230%;
margin-left: -65%;
}
(function($) {
      
function setup_collapsible_submenus() {
    
var FirstLevel = $('.et_mobile_menu .first-level > a');
  
FirstLevel.off('click').click(function() {
$(this).attr('href', '#');  
$(this).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});
  

}
      
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
 
})(jQuery);

嵌套菜单

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

移动的

嵌套菜单

桌面

嵌套菜单

最后的想法

在这篇文章中，我们向您展示了如何将折叠嵌套菜单应用于主题构建器中的全局标题。 我们从创建主菜单栏开始，继续使用菜单模块在主题构建器中设计我们的标题，并通过添加使效果起作用的自定义代码来完成本教程。 我们希望您喜欢本教程，如果您有任何问题，请随时在下面的评论部分发表评论！

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。