如何使用 Divi 在悬停时创建扩展的粘性菜单

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

本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用 Divi 的机械布局包在悬停时创建一个扩展的粘性菜单。 我们将处理两种不同的设计示例，您可以从头开始重新创建它们，并将其应用于您正在创建的任何类型的网站！ 该菜单将在桌面屏幕尺寸上悬停时显示，并在点击移动设备时激活。

让我们开始吧！

预览

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

示例#1

桌面

移动的

示例#2

桌面

移动的

一般步骤

禁用固定导航

转到 Divi 主题选项

我们将从一些一般步骤开始。 这些步骤对于两个示例都是相同的，并且是实现所需结果所必需的。

如果您打算在页面底部使用扩展的粘性菜单，您可能希望忽略顶部的主菜单栏。 为此，您需要转到 Divi 的主题选项。

禁用固定导航

在那里，您需要禁用固定导航栏选项以确保页面顶部没有剩余空间。

• 固定导航栏：禁用

隐藏页面上的主菜单栏

打开页面设置

移至要添加扩展粘性菜单的页面并打开页面设置。

添加自定义 CSS

通过向页面添加以下 CSS 代码行来隐藏主菜单。

#main-header {
display: none;
}

将新部分添加到页面末尾

无论您要重新创建哪个示例，一些基本步骤保持不变。 第一步是在页面底部添加一个常规部分。

间距

打开部分设置并删除所有自定义顶部和底部填充。

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

添加新行

列结构

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

浆纱

还没有添加任何模块，打开行设置并允许行占据屏幕的整个宽度。

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

间距

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

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

主要元素

通过向行的主要元素添加两行 CSS 代码，我们允许整行都贴在页面底部。

bottom: 0px;
position: fixed;

Z索引

我们将通过增加行的可见性设置中的 Z 索引来确保行（以及我们在接下来的步骤中添加的文本模块）保持在所有页面内容的顶部。

• Z指数：99

将代码模块添加到列

在样式标签之间添加 CSS 代码

一般步骤的最后一部分是向新行添加代码模块。 我们在此代码模块中添加的 CSS 代码将帮助我们实现悬停时的显示效果。 将以下 CSS 代码行粘贴到模块中：

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

重新创建示例 #1

将文本模块添加到列

添加内容

现在我们已经完成了所有步骤，我们可以开始关注两个不同的设计示例，从第一个开始！ 将文本模块添加到行的列。 在内容框中，我们使用段落样式来显示“≡ 菜单”副本。 然后，我们将所有菜单项放在一个无序列表中。 我们还将单独添加指向每个页面标题的链接。

默认背景颜色

转到模块的背景设置并更改背景颜色。

• 背景颜色：#ffffff

悬停背景颜色

在悬停时修改此背景颜色。

• 背景颜色：rgba(255,255,255,0.83)

渐变背景

并添加一个默认的渐变背景。

• 颜色 1：rgba(255,255,255,0)
• 颜色 2：#ffffff
• 结束位置：60%

默认文本设置

继续转到设计选项卡并修改文本设置。

• 文字字体：Khand
• 文字字体粗细：粗体
• 文字颜色：#021827
• 文字大小：3vh
• 文字方向：居中

悬停文本设置

修改悬停时的一些文本设置。

• 文字颜色：rgba(255,255,255,0)
• 文字大小：0vh

链接文字设置

然后，转到链接文本设置并更改链接文本颜色。

• 链接文字颜色：#000000

默认列表文本设置

转到默认列表文本设置，并根据需要设置样式。 确保在默认状态下使用“0px”作为文本大小。

• 无序列表字体：Khand
• 无序列表字体样式：大写
• 无序列表文本对齐：居中
• 无序列表文本颜色：rgba(255,255,255,0)
• 无序列表文本大小：0px
• 无序列表行高：0em
• 无序列表样式位置：内部

悬停列表文本设置

然后，修改悬停时的一些值以允许出现菜单项。

• 无序列表文本颜色：#000000
• 无序列表文本大小：2vh
• 无序行高：2.1em

默认间距

接下来转到间距设置并给文本模块一个形状。

• 左边距：45vw（桌面）、39vw（平板电脑）、33vw（手机）
• 右边距：45vw（桌面）、39vw（平板电脑）、33vw（手机）
• 顶部填充：2vw（桌面）、4vw（平板电脑）、6vw（手机）
• 底部填充：2vw（桌面）、4vw（平板电脑）、6vw（手机）

悬停间距

在悬停时修改这些相同的值。

• 左边距：14vw
• 右边距：14vw
• 顶部填充：8vw
• 底部填充：8vw

默认边框

转到边框设置并确保每个圆角的值都为“0px”。

悬停边框

启用圆角上的悬停选项并更改左上角和右上角的值。

• 左上角：50vw
• 右上：50vw

盒子阴影

继续使用框阴影给模块一些深度。 这将确保菜单不会在页面上被忽视。

• 框阴影模糊强度：1000ms
• 阴影颜色：rgba(0,0,0,0.68)

CSS 类

我们也在模块中添加一个 CSS 类。

• CSS 类：dt-menu

过渡

最后但并非最不重要的是，减少过渡设置中的过渡持续时间。

• 转换持续时间：100ms

重新创建示例 #2

将文本模块添加到列

添加内容

进入第二个例子！ 在这里，我们将再次使用段落文本样式添加“≡ 菜单”，并使用无序列表添加菜单项。 我们还将单独添加指向每个菜单项的链接。

默认背景颜色

转到背景设置并更改背景颜色。

• 背景颜色：#ffffff

悬停背景颜色

修改悬停时的背景颜色。

• 背景颜色：#f71535

默认文本设置

然后，转到设计选项卡并对段落副本的外观进行一些更改。

• 文字字体：Khand
• 文字颜色：#021827
• 文字大小：3vh

悬停文本设置

在悬停时修改这些设置。

• 文字颜色：rgba(255,255,255,0)
• 文字大小：0vh

链接文字设置

转到文本设置并更改链接文本颜色。

• 链接文字颜色：#ffffff

默认列表文本设置

更改无序列表项的设计设置。

• 无序列表字体：Khand
• 无序列表字体样式：大写
• 无序列表文本对齐：居中
• 无序列表文本颜色：rgba(255,255,255,0)
• 无序列表文本大小：0px
• 无序列表行高：0em
• 无序列表样式位置：内部

悬停列表文本设置

并在悬停时修改其中一些值。

• 无序列表文本颜色：#ffffff
• 无序列表文本大小：2vh
• 无序列表行高：2.1em

默认间距

然后，转到间距设置并给模块一些空间。

• 右边距：88vw（桌面和平板电脑），71vw（手机）
• 顶部填充：6vw（桌面）、10vw（平板电脑）、18vw（手机）
• 底部填充：4vw（桌面）、10vw（平板电脑）、12vw（手机）
• 左填充：1vw

悬停间距

修改悬停时的值。

• 右边距：59vw
• 顶部填充：13vw
• 底部填充：8vw
• 左填充：1vw
• 右填充：13vw

边界

为了创建这个四分之一圆设计，我们将在边框设置中更改右上角的边框。

• 右上：50vw

盒子阴影

我们还将添加一个框阴影以在页面上创建深度。

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

CSS 类

然后，我们将在高级选项卡中添加一个 CSS 类。

• CSS 类：dt-menu

过渡

并减少高级选项卡中的过渡持续时间以创建快速过渡。

• 转换持续时间：100ms

预览

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

示例#1

桌面

移动的

示例#2

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 的 Mechanic Layout Pack 创建一个扩展的粘性菜单。 我们已经处理了两个不同的设计示例，您可以在您正在构建的任何类型的网站上重新创建和使用它们！ 我们希望您喜欢这个正在进行的 Divi 设计计划，我们每周都会尝试在您的设计工具箱中添加一些额外的东西。 如果您有任何问题或建议，请务必在下方评论区留言！

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。