不久前，我们分享了一个移动菜单技巧，可帮助您创建折叠嵌套菜单。 我们知道你们中的许多人都使用过它，但是使用新的 Divi Theme Builder，方法会略有不同。 在今天的教程中，我们将向您展示如何将移动折叠效果应用到 Divi Theme Builder 中的菜单模块。 本教程分为三个主要部分：
- 设置菜单并为菜单项分配正确的类
- 使用主题生成器和菜单模块构建菜单
- 在 Theme Builder 中添加自定义代码
您还可以免费下载模板 JSON 文件！ 让我们开始吧。
预览
在深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
移动的
桌面
免费下载全局页眉设计
重要提示：在将 JSON 文件下载并上传到主题构建器后，您仍然需要使用正确的 CSS 类手动设置菜单 + 添加带有 CSS 和 JQuery 代码的代码模块（本文的第 1 步和第 3 步） .
要使用免费的折叠嵌套菜单，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
订阅我们的 Youtube 频道
1. 设置您的菜单
添加菜单项和子菜单项
您需要做的第一件事是创建菜单。 添加您选择的子项目。
添加 CSS 类选项
添加菜单项后，您可以通过单击“屏幕选项”并启用“CSS 类”来启用 CSS 类选项。
将 CSS 类添加到包含子菜单项的一级菜单项
继续向包含子菜单项的第一级菜单项添加 CSS 类。 在此示例中，这意味着将 CSS 类添加到“服务”和“组合”菜单项。
将 CSS 类添加到二级菜单项并保存菜单
然后，为菜单中的二级菜单项分配不同的 CSS 类。 确保仅将此 CSS 类添加到二级菜单项（以防添加更多级别）。 在本教程的后面，我们将使用这个 CSS 类和我们分配给第一级菜单项的类来创建折叠嵌套菜单。
- CSS 类：二级
2. 前往 Divi Theme Builder 并开始构建全局页眉
转到 Divi 主题生成器
本教程的下一部分侧重于创建页眉设计。 如果您想让嵌套技术应用于您已经构建的标题（使用菜单模块），您可以跳过此步骤并转到教程的最后一部分。 如果您想重新创建设计，请继续执行以下步骤。 转到 Divi 主题生成器。
开始构建全局标题
接下来开始构建您的全局标题。
部分设置
间距
在模板编辑器中，您会注意到一个部分。 打开该部分并删除所有默认的顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
Z 指数
也增加该部分的 z 索引。
添加新行
立柱结构
继续使用以下列结构向该部分添加新行：
浆纱
在不添加任何模块的情况下，打开行设置并允许行占据屏幕的整个宽度。
- 使用自定义装订线宽度：是
- 天沟宽度：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 栏
渐变背景
到下一列和最后一列。 添加渐变背景。
- 颜色一：#26c699
- 颜色 2：#abe02f
- 渐变方向：116度
间距
接下来添加一些自定义顶部和底部填充。
- 上边距：20px
- 底部填充：20px
边界
然后，转到边框设置并进行以下更改：
- 左上角：100px
- 左下：100px
盒子阴影
通过添加框阴影来完成列设置。
- 盒子阴影水平位置：-26px
- 盒子阴影垂直位置：0px
- 阴影颜色：#d2ff0c
将图像模块添加到第 1 列
上传徽标
是时候添加模块了，从第 1 列中的图像模块开始。上传您的徽标。
结盟
接下来更改模块的图像对齐方式。
浆纱
通过更改不同屏幕尺寸的宽度来完成模块的设置。
- 宽度：120 像素（桌面）、80 像素（平板电脑和手机）
将菜单模块添加到第 2 列
选择菜单
在第 2 列中，我们唯一需要的模块是菜单模块。 选择您在本教程的第一部分中创建的菜单。
删除背景颜色
接下来移除模块的背景颜色。
布局
然后，更改布局设置。
- 风格：居中
- 下拉菜单方向：向下
菜单文字
设置菜单文本的样式。
- 菜单字体：蒙特塞拉特
- 菜单字体粗细：中
- 菜单文字颜色：#000000
- 菜单文字大小：13px
- 菜单字母间距：1px
下拉式菜单
继续更改下拉菜单设置中的一些颜色。
- 下拉菜单背景颜色：#ffffff
- 下拉菜单行颜色：#000000
图标
并通过更改图标设置中的汉堡菜单图标颜色来完成模块的设置。
- 汉堡菜单图标颜色：#000000
将文本模块添加到第 3 列
添加内容
到下一个也是最后一个模块，这是第 3 列中的文本模块。添加一些您选择的副本。
添加链接
接下来添加指向模块的链接。
文字设置
转到设计选项卡并相应地更改文本设置：
- 文字字体：蒙特塞拉特
- 文本字体粗细：半粗体
- 文字颜色：#ffffff
- 文字大小：16px
- 文本行高：1em
- 文本对齐：居中
间距
通过添加一些上边距来完成模块的设置。
3. 使用代码模块向菜单添加功能
将代码模块添加到第 2 列
完成标题设计后，就可以添加自定义代码，将移动菜单转换为折叠嵌套菜单。 将代码模块添加到第二列（或其他任何地方）。
插入 CSS 和 JQuery 代码
然后，添加 CSS 和 JQuery 代码。 确保将 CSS 代码放在样式标签之间，将 JQuery 代码放在脚本标签之间。
.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 频道，这样您将永远是第一批了解并从这些免费内容中受益的人之一。
