如何使用 Divi 为您的网站创建滑动菜单栏

每周，我们都会为您提供新的免费 Divi 布局包，您可以将其用于下一个项目。 对于其中一个布局包，我们还分享了一个用例，可帮助您将网站提升到一个新的水平。

本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用抵押贷款经纪人布局包为您的网站创建滑动菜单栏。 这是向您的网站添加交互的好方法。 您将在所有屏幕尺寸上获得相同的用户体验，并且您可以将此技术用于您正在构建的任何类型的网站。

让我们开始吧！

预览

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

桌面

移动的

在 Divi 主题选项中禁用固定导航

转到 Divi 主题选项

让我们开始吧！ 您需要做的第一件事是转到 WordPress 网站上的 Divi 主题选项。

禁用固定导航

在这里，我们将禁用固定导航栏。 我们需要禁用此选项，以便在本教程后面的页面上完全摆脱主菜单栏。

• 固定导航栏：禁用

隐藏页面上的主菜单栏

在 Mortgage Broker Layout Pack Landing Page 上启用 Visual Builder

继续转到您使用 Mortgage Broker Layout Pack 的登录页面创建的页面并启用 Visual Builder。

打开页面设置

我们将通过添加一些 CSS 代码来隐藏页面上的主菜单栏。 要添加此代码，请打开页面设置。

添加自定义 CSS 代码以隐藏主菜单栏

然后，转到高级选项卡并将以下 CSS 代码行放入自定义 CSS 框中：

#main-header {
display: none;
}

添加此代码将有助于防止主菜单栏显示在页面上。

使用 Divi 创建自定义菜单设计

确保所有屏幕尺寸的英雄部分都有足够的顶部填充

现在我们已经去掉了页面上的主菜单栏，我们可以开始添加滑动菜单栏了！ 您需要做的第一件事是确保页面顶部有足够的填充，以便滑动菜单栏不会与任何现有内容重叠。 特别是对于 Mortgage Broker Layout Pack 的登陆页面，这意味着确保第 1 列的自定义填充在所有屏幕尺寸上保持“180px”。

• 顶部填充：180px

将新的常规部分添加到页面底部

是时候开始创建自定义滑动菜单栏了！ 在页面底部添加常规部分。

间距

打开部分设置并删除所有默认的顶部和底部填充。

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

添加行

列结构

继续使用以下列结构添加新行：

背景颜色

打开行设置并将行背景颜色更改为白色。

• 背景颜色：#ffffff

浆纱

然后，打开行设置并更改大小设置以允许行占据屏幕的整个宽度：

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

间距

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

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

盒子阴影

为了确保滑动菜单栏和页面本身之间有足够的深度，我们将添加一个框阴影。

• 框阴影模糊强度：80px
• 阴影颜色：rgba(0,0,0,0.55)

添加图像模块

上传公司标志

是时候开始添加我们想要在滑动菜单栏中显示的所有模块了，从一个图像模块开始。 使用宽度为 226 像素、高度为 100 像素的图像文件上传您的徽标。

结盟

然后，转到图像模块的设计选项卡并更改图像对齐方式。

• 图像对齐：居中

浆纱

接下来更改图像的大小设置。

• 最大宽度：75%（桌面），100%（平板电脑和手机）

间距

并为图像添加一些自定义的顶部和底部填充。

• 顶部填充：15px（平板电脑），25px（手机）
• 底部填充：15px（平板电脑），25px（手机）

添加按钮模块

添加副本

我们需要的第二个模块是按钮模块。 添加一些您选择的副本。

结盟

然后，转到设计选项卡并更改按钮对齐方式。

• 按钮对齐：居中

按钮设置

接下来修改按钮的外观。

• 为按钮使用自定义样式：是
• 按钮文字大小：0.8vw（桌面）、1.4vw（平板电脑）、2.1vw（手机）
• 按钮文字颜色：#ffffff
• 按钮背景颜色：#40eccc
• 按钮边框宽度：0px
• 按钮边框半径：50px
• 按钮字母间距：2px
• 按钮字体：Lato
• 字体粗细：重
• 字体样式：大写

间距

并使用自定义边距和填充值创建您想要的形状。

• 上边距：15px
• 下边距：15px
• 顶部填充：15px
• 底部填充：15px
• 左填充：40px
• 右填充：40px

添加文本模块 #1

将菜单项添加到内容框

我们在滑动菜单栏中需要的下一个模块是文本模块。 在这里，我们要将页面标题添加到内容框。

添加链接

转到链接设置并将正确的链接添加到文本模块。

背景颜色

接下来修改背景颜色。

• 背景颜色：#f2f2f2

文字设置

然后，更改文本设置。

• 文字字体：Lato
• 文字字体粗细：粗体
• 文字颜色：#000000
• 文字大小：0.9vw（桌面）、1.9vw（平板电脑）、2.4vw（手机）
• 文字方向：居中

间距

并向模块添加一些自定义的顶部和底部填充。

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

克隆文本模块 x5 次

完成对文本模块的修改后，您可以继续将其克隆 5 次。

更改副本

确保更改每个副本中的页面标题。

更改链接

随着链接。

更改背景颜色

接下来修改第二、四、六菜单项的背景颜色。

• 背景颜色：#ffffff

将自定义 CSS 添加到行

主要元素

现在，为了确保滑动菜单栏贴在页面顶部，我们需要向该行的主要元素添加几行 CSS 代码。

position:fixed;
top: 0px;
z-index: 99;

列主要元素

我们还将列变成允许我们滚动的网格。 您可以在下面的 CSS 代码中看到的百分比表示每个模块在网格中占用的空间。 如果您希望网格看起来不同，您可以修改这些值。

overflow-x: scroll;
display: grid;
grid-template-columns: 15% 45% 25% 25% 25% 25% 25% 25%;

列 CSS 类

为了摆脱滚动条，我们还将向该行添加一个 CSS 类。

移除滚动条

在页面上

您可以通过打开页面设置并将以下 CSS 代码行添加到自定义 CSS 框来删除页面本身上的滚动条：

.swipe-menu::-webkit-scrollbar {
display: none;
}

在整个网站上

如果您不想重复在每个页面上单独隐藏滚动条的相同步骤，您还可以转到 Divi 主题选项并通过向下滚动常规选项卡并添加以下行来使 CSS 代码应用于整个网站CSS 代码到自定义 CSS 框：

.swipe-menu::-webkit-scrollbar { display: none; }

另存为部分作为全局项目

一旦您的滑动菜单栏正常运行，您就可以将其作为全局项目保存到您的 Divi 库中，并在其他页面上使用它！

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何为您使用 Divi 创建的任何网站创建滑动菜单栏。 这是为您的网站添加另一个维度的好方法。 本教程是我们正在进行的 Divi 设计计划的一部分，我们每周都会尝试在您的设计工具箱中添加一些额外的东西。 如果您有任何问题或建议，请务必在下方评论区留言！