想在 Divi 中创建滑动和响应式侧边菜单吗？
当创建一个 网站Web，您经常想知道要创建什么类型的标头。 网络上使用最多的是顶部的水平菜单栏，但也有其他选项，例如滑动菜单。
滑动菜单通常可以帮助您限制全局标题占用的空间。 因此，您可以让滑出式菜单在您的 游客 单击右上角的汉堡包图标。
因此，使用滑出式菜单可以帮助您为您的 网站Web.
因此，在本教程中，我们将向您展示如何使用 Divi 的 Theme Builder 创建一个。
让我们开始吧！
概观
在我们深入本教程之前，让我们先看看我们将得到的结果。
转到主题生成器并创建一个全局标题
转到主题生成器
要开始使用，请从 WordPress 仪表板的 Divi 菜单转到 Theme Builder，然后单击“添加全局标题”。
创建全局标头
继续选择“创建全局标题”。
创建标题样式
栏目设置
背景颜色
进入模板编辑器后，您会注意到一个部分。 打开此部分并使背景颜色透明。
- 背景：rgba (255,255,255,0)
间距
切换到样式选项卡并删除所有底部和顶部边距。
- 内边距顶点：0px
- 底部内边距：0px
邮寄
接下来，我们将通过转到高级选项卡并更改位置设置来更改该部分的位置。
- 位置：固定
- 位置：顶部中心
添加第一行
列的结构
完成部分设置后，使用以下列结构添加新行：
浆纱
在不添加任何模块的情况下，打开行设置并按如下方式更改大小设置：
- 最大宽度：97%
- 最大宽度：100%
间距
更改间距设置。
- 峰值内部保证金：1%
- 底部内边距：0px
主要元素
接下来，转到高级选项卡，并将两行 CSS 代码添加到该行的主要元素中。 这将帮助我们垂直对齐 内容 我们行中的列。
display: flex;
align-items: center;
将图像模块添加到第 1 列
下载徽标
是时候添加模块了，从第 1 列中的图像模块开始。上传您的徽标。
将文本模块添加到第 3 列
在内容区域添加 3 个空格
<spanclass="line line-1"></span>
<spanclass="line line-2"></span>
<spanclass="line line-3"></span>
背景颜色
修改模块的背景颜色。
- 背景：rgba (0,0,0,0.04)
文字设定
接下来，切换到样式选项卡并删除文本行高。 这将帮助我们完全控制我们添加的范围。
- 文字行高：0em
浆纱
我们将修改模块大小参数。
- 最大宽度：120 像素
- 文本对齐：右
间距
我们将通过将模块转换为正方形来完成模块参数。 为此，我们将在间距设置中使用自定义填充值。
- 内边距顶点：40px
- 底部内边距：60px
- 左边距：40px
- 内边距右：40px
添加第二行
列的结构
下一行！ 我们将使用这条线来设计我们的整个滑动菜单。 使用以下列结构：
背景颜色
在不添加模块的情况下，打开行设置并更改背景颜色，如下所示：
- 背景：#e7e0e2
背景图像
我们还使用带图案的背景图像。 您可以使用您选择的背景图案。
- 背景图片尺寸：实际尺寸
- 背景图片位置：居中
- 重复背景图像：重复
浆纱
接下来，切换到样式选项卡并相应地更改大小设置：
- 使用自定义装订线宽度：是
- 列间距：1
- 最大宽度：20%（台式机）、40%（平板电脑）、60%（手机）
- 高度：100vh
间距
还可以更改不同屏幕尺寸的间距设置。
- 峰会内部利润率：10 vw（台式机）、30 vw（平板电脑）、40 vw（手机）
边框
并通过添加左边框来完成线条参数。
- 左边框宽度：10px
- 左边框颜色：#24394a
- 左边框样式：双
将文本模块添加到列
添加内容
是时候添加第一个文本模块菜单项了！ 将副本添加到框中 内容.
Ajouter联合国留置权
继续向菜单项添加相关链接。
- 模块链接地址：#
背景颜色
然后更改背景颜色。
- 背景：rgba (216,210,212,0.35)
文字设定
接下来，切换到 Style'3 选项卡并更改文本设置，如下所示：
- 文字字体：Domine
- 柔光文字：粗体文字
- 文字颜色文字：#000000
- 文本 文本大小：1vw（桌面）、2vw（平板电脑）、3vw（手机）
- 文本对齐方式：居中
间距
通过在不同屏幕尺寸上添加自定义间距值来完成模块设置。
- 下边距：1vw（桌面）、2vw（平板电脑）、3vw（手机）
- 峰值内部裕量：1vw
- 底部内边距：1vw
克隆文本模块（每个菜单项 1 个模块）
完成第一个菜单项文本模块后，您可以根据需要多次克隆它。 只要确保您的模块不超过窗口的高度。
编辑重复文本模块内容和链接
修改 内容 以及每个重复文本模块的链接。
将按钮模块添加到列
添加副本
我们在这一行中需要的最后一个模块是一个 Button 模块。 添加您选择的副本。
Ajouter联合国留置权
还要加个链接。
- 按钮链接地址：#
对准
切换到样式选项卡并更改按钮对齐方式。
- 按钮对齐方式：居中
按钮设置
继续自定义 Button 模块，如下所示：
- 为按钮使用自定义样式：是
- 按钮文字大小：0,7 vw（桌面）、1,5 vw（平板电脑）、2,5 vw（手机）
- 按钮文字颜色：#000000
- 背景按钮：rgba (0,0,0,0)
- 按钮边框颜色：#24394a
- 边框半径按钮：0 像素
- 按钮字母间距：4px
- 字体按钮：打开无
- 柔光按钮：粗体字
- 复制样式按钮：TT
间距
并通过在不同屏幕尺寸上添加自定义间距值来完成模块设置。
- 最高边距：5vw
- 峰值内部余量：1vw（台式机）、2vw（平板电脑）、3vw（手机）
- 内边距底部：1vw（台式机）、2vw（平板电脑）、3vw（手机）
- 左侧内边距：1,8 vw（桌面）、3 vw（平板电脑）、4 vw（手机）
- 右内边距：1,8 vw（桌面）、3 vw（平板电脑）、4 vw（手机）
添加滑动功能
将 CSS ID 添加到菜单图标文本模块
现在我们已经准备好所有元素，是时候创建响应式滑动菜单效果了！ 首先，打开第一行第三列中的文本模块（包含范围），并在高级选项卡中使用自定义 CSS ID。 我们将使用这个 CSS ID 在我们的代码中创建一个点击函数。
- CSS ID：滑动打开
将 CSS 类添加到第 2 行
然后打开第二行，转到高级选项卡并添加自定义 CSS 类。 单击时，线条将滑动。
- CSS 类：滑动菜单容器
更改第 2 行的位置
我们还将重新定位这条线。 请注意在尺寸设置中水平偏移如何与不同屏幕尺寸上的线宽相匹配。
- 职位：绝对
- 位置：右上角
- 水平偏移：-20%（台式机）、-40%（平板电脑）、-60%（手机）
更改第 2 行的不透明度
并在默认状态下将不透明度设为 0。
opacity: 0;
将代码模块添加到第一行的第二列
插入 CSS 代码
要创建单击功能效果并为我们的汉堡图标的五线谱设置样式，我们需要一些 CSS 代码。 将代码模块添加到第一行的第二列，然后 在样式标签之间放置以下几行 CSS 代码， 正如您在下面的打印屏幕中看到的那样：
#slide-in-open{
cursor: pointer;
}
.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
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;
}
#slide-in-open.open .line-1{
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#slide-in-open.open .line-2{
display: none;
}
#slide-in-open.open .line-3{
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.slide-in-menu {
right: 0!important;
opacity: 1!important;
}
.slide-in-menu-container {
-webkit-transition: all0.5s ease !important;
-moz-transition: all0.5s ease !important;
-o-transition: all0.5s ease !important;
-ms-transition: all0.5s ease !important;
transition: all0.5s ease !important;
}
插入 JQuery 代码
我们还需要为 click 函数添加一些 JQuery。 确保你 在脚本标签之间放置代码 ，正如您在下面的打印屏幕中看到的那样：
jQuery(function($){ $('#slide-in-open').click(function(){ $(this).toggleClass('open'); $('.slide-in-menu-container') .toggleClass('slide-in-menu'); }); });
保存主题生成器更改并在网站上显示结果
完成全局标题的所有元素后，您所要做的就是保存所有更改并在您的站点上显示结果！
概观
现在我们已经完成了所有步骤，让我们最后看一下结果。
结论
总之，在本文中，我们向您展示了如何使用 Divi 的主题构建器来创建响应式滑动菜单。 为此，我们将 Divi 的最佳内置元素和选项与自定义点击功能代码相结合。 因此，它可以让您专注于设计滑出式菜单，并让代码处理全局标题的功能部分！
如果您有任何疑问或建议，请随时在下面的评论部分中发表评论。
