如何使用 Divi 和 Anime.js 构建交错动画汉堡菜单
已发表: 2021-02-17过去，我们分享了您可以使用 Divi 和 Divi Theme Builder 创建的不同类型的标题。 事实上，您可以找到此导航帖子中列出的所有教程。 在那篇文章中，您会注意到我们已经向您展示了如何创建全屏标题，但为了帮助您进一步进行标题设计，我们还将向您展示如何创建自定义动画汉堡菜单。 我们将创建的汉堡菜单有一些值得注意的地方：
- 一旦访问者点击汉堡图标，全屏标题将过渡，每个菜单项将一项一项显示，赋予其自定义动画外观和感觉
- 每次打开菜单时都会触发自定义动画
- 您还可以向主菜单项添加下拉项，这些项在单击时打开并在有人关闭菜单或单击导航项时自动关闭
换句话说，这绝对是一个标题教程，可以帮助您将高级外观添加到您的网站。 您也可以随意设置项目的样式，并且可以免费下载 JSON 模板文件！
让我们开始吧。
预览
在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
免费下载全局标题模板
要使用免费的全局标题模板，您首先需要使用下面的按钮下载它们。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
1. 创建新的标题模板
转到 Divi 主题生成器并添加新的全局标题模板
首先转到Divi Theme Builder。 在那里，添加一个新的全局标题。
从头开始构建
并从头开始构建标题设计。
2. 建立标志和汉堡包图标
部分设置
背景颜色
进入模板编辑器后，我们将开始构建徽标和汉堡包图标。 你会注意到那里已经有一个部分了。 打开部分设置并应用透明背景色。
- 背景颜色：rgba(255,255,255,0)
间距
转到该部分的设计选项卡，然后删除所有默认的顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
位置
然后，转到高级并将部分固定。
- 位置：固定
- 位置：左上角
- Z指数：13
添加新行
列结构
继续使用以下列结构向该部分添加新行：
浆纱
在不添加模块的情况下，打开行设置，转到设计选项卡并相应地更改大小设置：
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 均衡柱高：是
- 宽度：95%
- 最大宽度：100%
间距
接下来删除所有默认的顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
主要元素 CSS
为了确保徽标和汉堡包图标在较小的屏幕尺寸上彼此相邻，我们将在行的主要元素中插入一行 CSS 代码。
display: flex;
将图像模块添加到第 1 列
上传标志
是时候添加模块了，从第 1 列中的图像模块开始。上传您选择的徽标。
浆纱
转到设计选项卡，然后更改大小设置。
- 最大宽度：
- 桌面：80px
- 平板电脑和手机：50px
位置
然后，重新定位整个模块。
- 位置：绝对
- 位置：左上角
- 垂直偏移：20px
将文本模块添加到第 3 列
内容框中的 HTML 结构
在第三列中，我们将添加一个文本模块。 我们将使用这个文本模块来创建我们的汉堡包图标。 首先切换到内容框中的文本选项卡并插入以下 HTML 标签：
<span class="line line-1"></span> <span class="line line-2"></span> <span class="line line-3"></span>
浆纱
接下来修改模块的大小设置。
- 宽度：80px
- 高度：80px
间距
然后，跨不同屏幕尺寸应用自定义填充值。
- 顶部填充：
- 桌面：10px
- 平板电脑和手机：17px
- 底部填充：
- 桌面：10px
- 平板电脑和手机：17px
- 左填充：
- 桌面：15px
- 平板电脑和手机：30px
- 右填充：
- 桌面：15px
- 平板电脑和手机：10px
位置
也重新定位这个模块。
- 位置：绝对
- 位置：左上角
3. 制作汉堡菜单
添加新部分
渐变背景
现在我们已经有了徽标和汉堡包图标，我们可以继续下一部分，该部分致力于构建汉堡包菜单及其所有项目。 首先添加一个新部分，打开部分设置并应用渐变背景。
- 颜色 1：#000000
- 颜色 2：#111111
- 渐变类型：线性
- 梯度方向：90度
- 起始位置：50%
- 结束位置：50%
浆纱
接下来将最小高度和最大高度应用于大小设置。
- 最小高度：100vh
- 最大高度：100vh
间距
然后，删除所有默认部分的顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
溢出
也修改溢出。
- 水平溢出：隐藏
- 垂直溢出：自动
位置
为了确保菜单可以随时打开，我们将重新定位高级选项卡中的部分。
- 位置：固定
- 位置顶部中心
添加新行
列结构
继续使用以下列结构向该部分添加新行：
浆纱
在不添加模块的情况下，打开行设置，转到设计选项卡并按如下方式更改大小设置：
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 均衡柱高：是
- 宽度：100%
- 最大宽度：100%
间距
接下来删除所有默认的顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
溢出
然后，转到高级选项卡并更改溢出。
- 水平溢出：隐藏
- 垂直溢出：自动
位置
也重新定位行。
- 位置：绝对
- 位置顶部中心
第 1 列设置
间距
接下来，我们将打开我们行的第 1 列设置并应用一些自定义响应填充值。
- 顶部填充：
- 台式机：24vh
- 平板电脑和手机：10vh
- 底部填充：
- 台式机：24vh
- 平板电脑和手机：5vh
- 左填充：13%
- 右填充：13%
边界
我们也会应用一些边框设置：
- 右边框宽度：
- 桌面：2px
- 平板电脑和手机：0px\
- 右边框颜色：#191919
- 底部边框宽度：
- 桌面：0px
- 平板电脑和手机：2px
- 右边框颜色：#191919
第 2 列设置
间距
然后，我们将转到第 2 列并在那里应用一些自定义填充值。
- 顶部填充：
- 台式机：24vh
- 平板电脑和手机：5vh
- 底部填充：
- 台式机：24vh
- 平板电脑和手机：5vh
- 左填充：13%
- 右填充：13%
将文本模块 #1 添加到第 1 列
添加H3内容
是时候添加模块了，从第 1 列中的第一个文本模块开始。添加一些您选择的 H3 内容。
H3 文本设置
转到设计选项卡并按如下方式更改 H3 文本设置：
- 标题 3 字体：蒙特塞拉特
- 标题 3 字体粗细：超粗体
- 标题 3 字体样式：大写
- 标题 3 文本颜色：#ffffff
- 标题 3 文字大小
- 台式机：1vw
- 平板电脑：2.5vw
- 电话：3.5vw
- 标题 3 字母间距：5px
间距
接下来添加一些底部边距。
- 底边距：5vh
克隆文本模块并在第 2 列中放置重复项
完成第一个模块后，您可以克隆它一次并将副本放在第 2 列中。
更改内容
确保更改此重复模块中的内容。
将文本模块 #2 添加到第 2 列
内容框中的 HTML 结构
为了展示我们的菜单项，包括子菜单项，我们将使用新文本模块的文本选项卡。 继续向第 1 列添加一个新的文本模块并插入以下 HTML：
<span style="color: #686868;">01—</span> <a href="#">Services</a> <span class="toggle-sub-menu" style="color: #ffff00;">+</span> <ul> <li><a href="#">Web design</a></li> <li><a href="#">Branding</a></li> </ul>
文字设置
转到模块的设计选项卡并按如下方式更改文本设置：
- 文字字体：蒙特塞拉特
- 文字字体粗细：细
- 文字颜色：#ffffff
- 字体大小：
- 台式机：2.7vw
- 平板电脑：4vw
- 电话：6vw
- 文字字母间距：0.1em
- 文本行高：1em
链接文字设置
也更改链接文本颜色。
- 林文字颜色：#ffffff
无序列表文本设置
然后，修改无序列表文本设置。
- 无序列表字体：Montserrat
- 无序列表字体粗细：粗体
- 无序列表字体样式：大写
- 无序文本大小：
- 台式机：1vw
- 平板电脑：2.5vw
- 电话：3.5vw
- 无序列表行高：1.5em
- 无序列表样式类型：无
- 无序列表样式位置：内部
间距
并通过添加一些自定义的顶部和底部填充来完成模块设置。
- 顶部填充：5%
- 底部填充：5%
克隆文本模块以创建没有子菜单的变化
完成第一个模块后，您可以克隆它一次。 我们将使用此重复来创建没有子菜单项的菜单项的变体。
省去子菜单和切换图标
要将此重复模块转换为没有子菜单项的常规菜单项，请改用此 HTML 结构：
<span style="color: #686868;">03—</span> <a href="#">Contact</a>
重用两种类型的菜单项
一旦您拥有了菜单项的两个变体，您就可以通过克隆它们并更改内容来相应地重用它们。
将文本模块 #2 添加到第 2 列
将 H4 和段落内容添加到内容框
在第 2 列中，我们将添加另一个文本模块，其中包含我们选择的一些 H4 和段落内容。
文字设置
转到设计选项卡并相应地更改文本设置：
- 文字字体：阿拉塔
- 文字颜色：#cecece
- 字体大小：
- 台式机：0.8vw
- 平板电脑：2.4vw
- 电话：3.4vw
- 文字字母间距：1px
- 文本行高：1.5em
- 文字颜色：浅
H4 文本设置
也对 H4 文本设置进行一些更改。
- 标题 4 文字大小：
- 台式机：1vw
- 平板电脑：3vw
- 电话：4vw
浆纱
然后，在大小设置中修改模块的宽度。
- 宽度：48%
主要元素 CSS
并在模块的主要元素中添加一行 CSS 代码。 这行 CSS 代码将帮助我们将两个文本模块并排放置。
display: inline-block;
克隆文本模块 #2
更改副本
完成文本模块后，您可以克隆它一次并相应地更改内容。
将社交媒体关注模块添加到第 2 列
添加选择的社交网络
我们在此设计中需要的最后一个模块是第 2 列中的社交媒体关注模块。添加您选择的社交网络。
单独删除每个社交网络的背景颜色
单独删除每个社交网络的背景颜色。
间距
然后，返回到常规模块设置并应用一些上边距。
- 最高边距：5vh
4. 添加功能
将 CSS 类添加到汉堡图标文本模块
现在我们的汉堡菜单设计的基础已经建立，我们现在可以专注于添加功能！ 您需要做的第一件事是打开包含汉堡包图标的文本模块并添加以下 CSS 类：
- CSS 类：全宽开放
将 CSS 类添加到部分 #2
然后，打开汉堡菜单部分，部分 #2，并添加以下 CSS 类：
- CSS 类：全宽菜单
在全角菜单中为每个模块添加 CSS 类
要创建自定义交错动画效果，我们需要将以下 CSS 类应用于第 #2 部分中的每个模块。
- CSS 类：交错效果
向菜单项添加额外的 CSS 类
向第 1 列中的每个菜单项添加一个名为“main-menu-item”的额外 CSS 类。
- CSS 类：交错效果主菜单项
将代码模块添加到部分 #1
为了应用该功能，我们将使用自定义 CSS 和 JQuery 代码。 我们将把这段代码放在第 1 节中我们行的第二列的新代码模块中。
插入 CSS 代码
将以下 CSS 代码添加到样式标记之间的代码模块中，您可以在下面的打印屏幕中看到。
/* enable class below once you're done editing the menu */
/*
.fullwidth-menu {
opacity: 0;
top: 0vh;
visibility: hidden;
}
*/
.line{
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.fullwidth-open.open .line{
background: white;
}
.line-1 {
top: 15px;
}
.line-2 {
top: 25px;
width: 80%;
}
.line-3 {
top: 35px;
width: 50%;
}
.fullwidth-open.open .line-1 {
top: 25px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.fullwidth-open.open .line-2 {
display: none;
}
.fullwidth-open.open .line-3 {
top: 25px;
width: 100%;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.fullwidth-menu-open {
opacity: 1 !important;
top: 0 !important;
visibility: visible !important;
}
.fullwidth-menu {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}
.main-menu-item ul {
display: none;
padding: 0;
margin-top: 50px;
}
.toggle-sub-menu {
cursor: pointer;
}
插入 Anime.js 库
继续使用脚本标签添加 Anime JavaScript 库，如下面的打印屏幕所示。 我们将在本教程的下一步中使用这个很棒的库来创建交错效果。
- src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"
插入 JQuery 代码
我们的汉堡菜单中的点击功能由以下 JQuery 代码提供支持。 确保将此代码放在脚本标记之间，如下面的打印屏幕所示。
jQuery(function($){
$(document).ready(function(){
// All variables needed in functions
var menuSection = $('.fullwidth-menu');
var hamburgerIcon = $('.fullwidth-open');
var menuLink = $('.fullwidth-menu a');
var subMenu = $('.main-menu-item ul');
var toggleIcon = $('.toggle-sub-menu');
// Open fullwidth menu & animate items
hamburgerIcon.click(function(){
$(this).toggleClass('open');
menuSection.toggleClass('fullwidth-menu-open');
if (menuSection.hasClass("fullwidth-menu-open")) {
anime({
targets: '.stagger-effect',
translateY: [150, 0],
opacity: [0, 1],
loop: false,
delay: anime.stagger(100, {easing: 'easeOutQuad'})
});
} else {
subMenu.slideUp();
toggleIcon.text($(this).text() == '+' ? '-' : '+');
}
});
// Close fullwidth menu when clicking an item
menuLink.click(function(){
hamburgerIcon.toggleClass('open');
menuSection.toggleClass('fullwidth-menu-open');
subMenu.slideUp();
toggleIcon.text($(this).text() == '+' ? '-' : '+');
});
// Change icon when toggling the submenu
toggleIcon.click(function(){
var subMenu = $(this).parent().find("ul");
subMenu.slideToggle();
$(this).text($(this).text() == '-' ? '+' : '-');
});
});
});
完成全屏页眉设计后立即激活 CSS 类
最后但并非最不重要的一点是，我们将在代码模块中启用一个 CSS 类，您可以在第一部分中找到它。 打开代码模块，去掉类开头和结尾的“/* */”。 启用此类（结合一些已启用的 JQuery 代码）将确保包含菜单项的部分在有人访问您的页面时不会立即加载。 启用此类后，页面上的第二部分将从 Visual Builder 中消失，但如果您想进行其他更改，您仍然可以在线框模式下访问它或关闭 CSS 类。
5. 保存标题和主题生成器更改
就是这样！ 剩下要做的就是保存模板和 Divi Theme Builder 并在您的网站上查看结果！
预览
现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。
桌面
移动的
最后的想法
在这篇文章中，我们向您展示了如何利用 Divi 标题发挥创意。 更具体地说，我们向您展示了如何创建自定义动画汉堡菜单。 一旦访问者点击汉堡包图标，全屏菜单就会切换进来并逐一显示菜单项，从而带来漂亮的用户体验。 您还可以免费下载模板 JSON 文件！ 如果您有任何疑问，请随时在下面的评论部分发表评论。
如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。