带有大量导航链接的大标题可能会占用您网站上大量宝贵的空间（尤其是首屏）。 这就是为什么弹出式和滑入式菜单变得越来越流行的原因。 大多数时候，滑入查看的菜单停留在页面内容之上，隐藏了某些元素。 但是，滑动推送菜单的工作方式略有不同。 滑动推送效果的独特之处在于菜单从页面顶部滑入，同时将页面内容向下推送，因此没有任何内容被隐藏。
在本教程中，我们将向您展示如何使用 Divi Theme Builder 从头开始构建滑动推送菜单。 构建菜单后，它将成为适用于所有类型应用程序的多功能工具，因为您将能够使用 Divi Builder 用您想要的任何内容填充该部分。
让我们开始吧！
抢先看
这是我们将在本教程中构建的滑动推送菜单的快速浏览。
免费下载布局
要掌握本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
要将部分布局导入 Divi Theme Builder，请导航到 Divi Theme Builder。
单击可移植性图标。
在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。
然后单击导入按钮。
完成后，部分模板将出现在 Divi Theme Builder 中。
让我们进入教程，好吗？
使用 Divi Theme Builder 构建滑动推送菜单
创建新的全局菜单
要创建菜单，我们将在 Divi Theme Builder 中构建一个新的全局标题。
导航到 Divi > 主题生成器。
然后单击默认网站模板中的“添加全局标题”区域。 从下拉列表中，选择“构建全局标题”。
这将带您进入全局标题布局编辑器。
进入全局页眉布局编辑器后，选择“从头开始构建”选项。
创建推送菜单
我们将一起构建的第一个元素是推送菜单部分。 此部分将包含在单击菜单切换按钮时将向下和向上切换的菜单项。
部分设置
打开默认部分的设置，更新设置如下：
背景
- 背景颜色：#1a1e36
填充
- 内边距：0px 顶部，0px 底部
CSS 类
在高级选项卡下，添加以下 CSS 类，稍后将在我们的 JS 代码中使用。
自定义 CSS（平板电脑）
接下来，我们需要使用计算出的高度来调整移动部分的高度，以适应我们将添加的主标题栏。 当用户切换菜单打开时，这将实质上使该部分跨越移动窗口的整个高度。
仅将以下自定义 CSS 添加到平板电脑上的主元素：
height: calc(100vh - 70px); overflow:scroll !important; overscroll-behavior: contain;
添加第 1 行
完成部分设置后，在该部分中创建一个单列行。
第 1 行设置
然后按如下方式更新行设置：
设计
- 天沟宽度：1
- 宽度：100%
- 最大宽度：1280px
- 填充：3vh 顶部，3vh 底部
- 底部边框宽度：1px
- 底部边框颜色：rgba(255,255,255,0.2)
自定义 CSS
在高级选项卡下，将以下自定义 CSS 添加到主元素：
在桌面…
display:flex; justify-content:center; align-items:center;
在平板电脑下…
display:flex; flex-direction:column; align-items:center;
列设置
行设置完成后，打开列的设置并将自定义 CSS 片段添加到主元素：
display:flex; align-items:center; justify-content:center;
这将使列的内容在垂直和水平方向居中。
添加按钮
现在我们准备开始使用按钮模块添加我们的菜单项。 首先在列中添加一个新按钮。
按钮设置
然后更新按钮设置如下：
内容
- 按钮文字：设计
- 按钮链接 URL：#（稍后将其替换为您自己的自定义 URL）
设计
- 按钮文字颜色：#ffffff
- 按钮边框宽度：0px
- 按钮字体：蒙特塞拉特
- 按钮字体粗细：重
- 按钮图标： [your choice]
- 按钮图标位置：左
复制列
现在要为菜单创建附加按钮，我们可以复制该列。 对于这个设计，让我们将列复制 4 次，总共有 5 个菜单项/按钮。 在一个五列的行中。
添加第 2 行
第一行完成后，我们准备添加另一行按钮，可用于一组不同的菜单项。
要创建下一行，请复制第 1 行。
删除除一之外的所有列
然后删除重复行中除一列之外的所有列。
第 2 行设置
如下更新第 2 行的设置：
- 最大宽度：1080px
- 底部边框宽度：0px
列设置
然后为列添加边框，如下所示：
- 右边框宽度：1px
- 右边框颜色：rgba(255,255,255,0.2)
更新按钮设置
在列具有右边框后，打开按钮的设置并更新以下内容：
- 按钮文字大小：14px
- 按钮字母间距：2px
- 按钮字体粗细：半粗体
- 按钮字体样式：TT
- 显示按钮图标：否
复制列
就像我们之前做的那样，让我们复制列来创建额外的按钮和列。 对于这个设计，让我们将列复制 3 次，以在 4 列的行中为我们提供总共 4 个按钮。
删除最后一列边框
由于我们不希望最后一列有右边框，因此打开第 4 列的设置并更新边框宽度：
创建主标题栏
接下来，我们将为主标题栏创建部分。 这个标题栏将始终保持可见，并将成为我们的网站徽标、CTA 和我们的菜单切换按钮。
添加部分
在我们添加新部分之前，最好将前一部分的标签更新为“Push Menu Section”。
然后在第一部分下方创建一个新部分。
部分设置
现在将新部分上的标签更新为“标题部分”。 然后打开部分设置并更新以下内容：
填充
- 内边距：0px 顶部，0px 底部
添加行
添加部分填充后，向该部分添加一个三列行。
行设置
打开行设置并更新以下内容：
浆纱
- 天沟宽度：1
- 宽度：90%
- 高度：70 像素
填充
- 填充：填充：0px 顶部，0px 底部
自定义 CSS
在高级选项卡下，将以下自定义 CSS 添加到主元素：
display:flex; align-items:center;
这将使行内的列垂直居中。
添加按钮
要在标题部分创建主 CTA，我们可以使用顶部第二行的按钮。 复制顶部第 2 行第 1 列的按钮，并将其粘贴到标题部分行的第 1 列。
更新按钮设置
然后打开复制按钮的按钮设置并更新以下内容：
- 按钮文本：注册
- 按钮文字大小：14px
- 按钮文字颜色：#1a1e36
- 显示按钮图标：是
- 按钮图标：右箭头（见截图）
添加徽标
在中间列中，添加一个图像模块。 这将是我们动态添加站点徽标的方式。
将鼠标悬停在图像框上，然后单击“使用动态内容”图标。 从下拉列表中选择“站点徽标”。
图像设置
然后，在设计选项卡下，更新以下内容：
- 图像对齐：居中
- 最大高度：55px
添加自定义汉堡图标
我们可以通过简介模块使用常规图标作为我们的菜单切换，但对于本教程，我认为我们将添加一个具有酷炫过渡效果的自定义菜单切换。
添加文本模块
为了创建菜单图标，我们将使用带有一些自定义 HTML 的文本模块，这些 HTML 将使用外部 CSS 进行样式设置。
继续在第 3 列添加一个文本模块。
添加文本模块 HTML
然后将以下 HTML 添加到文本模块的内容中：
<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>
背景
给文本模块一个背景颜色：
- 背景颜色：#1a1e36
文字设计
然后更新设计设置如下：
- 宽度：70 像素
- 模块对齐：右
- 高度：70 像素
- 内边距：顶部 20 像素，底部 20 像素，左侧 16 像素，右侧 16 像素
CSS 类
在高级选项卡下，添加以下 CSS 类：
- CSS 类：et-push-menu-toggle
添加代码
为了将我们需要的滑动推送菜单功能带回家，我们将自定义 CSS 和 jQuery 添加到代码模块中。
继续在文本模块下的第 3 列中添加一个代码模块。
然后粘贴以下代码（重要：将此代码包装在样式标签中以使其正常工作）：
.line {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #ffffff;
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;
}
.line-2 {
top: 10px;
}
.line-3 {
top: 20px;
}
.et-push-menu-toggle.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.et-push-menu-toggle.open .line-2 {
display: none;
}
.et-push-menu-toggle.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.et-push-menu {
display:none;
}
.et-fb .et-push-menu {
display:block;
}
.et-push-menu-toggle {
cursor:pointer;
}
接下来，将这段代码复制并粘贴到它的正下方（重要：将此代码包装在脚本标签中以使其正常工作）：
(function($) {
$(document).ready(function(){
$('.et-push-menu-toggle').click(function(){
$(this).toggleClass('open');
$('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
});
});
})( jQuery );
更新按钮文本和链接
最后，我们可以使用必要的按钮文本和链接 URL 更新所有按钮。
就是这样！
保存设置
不要忘记保存布局和主题生成器设置。
最后结果
要查看最终结果，请查看您网站上的实时页面。
使其具有粘性
如果您想要“粘性”版本的菜单，您只需将以下 CSS 片段添加到代码模块（在 风格 标签）：
header {
position: sticky;
top:0;
z-index:9999;
}
#page-container {
overflow-y: visible !important;
}
这是结果。
最后的想法
我希望你喜欢这个滑动推送菜单。 效果是独一无二的，它为更多创意标题打开了大门。
我期待在评论中收到您的来信。
干杯!
