如何使用 Divi 在您的页面上悬停/单击时创建模糊菜单
已发表: 2019-07-03每周，我们都会为您提供新的免费 Divi 布局包，您可以将其用于下一个项目。 对于其中一个布局包，我们还分享了一个用例，可帮助您将网站提升到一个新的水平。
本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何创建一个令人惊叹的模糊菜单，一旦您悬停或单击它就会展开。 我们将首先通过一些一般步骤开始。 我们将继续使用 Blurb 模块添加菜单项，最后我们将允许您在悬停或点击效果之间进行选择。
让我们开始吧！
预览
在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
悬停方式
桌面
移动的
点击模式
桌面
移动的
1. 创建空白页面并上传观光登陆页面
添加新的空白页面并启用 Divi Builder
您需要做的第一件事是创建一个新的空白页面。 为您的页面命名并切换到 Divi Builder。
上传观光登陆页面
启用 Divi Builder 后，上传 Sightseeing Layout Pack 的登陆页面布局。
2.在页面底部添加新的常规部分
隐藏主菜单栏后，我们可以开始添加模糊菜单。 为此，我们将在页面底部添加一个新的常规部分。
背景颜色
打开部分设置并添加稍微透明的白色背景色。
- 背景颜色：rgba(255,255,255,0.98)
间距
移至设计选项卡并删除该部分的所有默认顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
默认框阴影
在接下来的部分添加框阴影。
- 框阴影模糊强度：18px
- 阴影颜色：#383838
悬停框阴影
并在悬停时更改框阴影模糊强度。
- 框阴影模糊强度：1000px
隐藏部分溢出并增加 Z 索引
我们将使用节大小设置来使这项技术起作用，但为了确保没有超出节容器的内容，我们需要隐藏溢出。 我们还增加了 Z 索引，以确保该部分位于页面其余部分的顶部。
- 水平溢出：隐藏
- 垂直溢出：隐藏
- Z指数：9999
3. 确保所有部分菜单内容都是使用 Vw 创建的，并且适合所有屏幕尺寸的 100 视口高度
添加第 1 行
列结构
完成基本部分设置后，就可以添加要在菜单中显示的所有内容了。 您可以使用 Divi 的设计元素和内置选项创建您想要的任何设计，但您必须确保它适合所有屏幕尺寸的“100vh”高度。 为了实现这一点，我们将在整个构建过程中使用视口宽度单位，并在不同屏幕尺寸上调整值。 首先使用以下列结构向您的部分添加新行：
浆纱
在不添加任何模块的情况下，打开行设置并确保它占据该部分的整个宽度。
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 宽度：100%
- 最大宽度：100%
间距
转到间距设置并删除所有默认的顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
将文本模块添加到列
添加符号
继续向行的列添加文本模块。 将“=”符号添加到内容框中或随意使用您选择的任何其他符号。
背景颜色
接下来更改模块的背景颜色。
- 背景颜色：#000000
文字设置
转到设计选项卡并更改文本设置。
- 文字字体：Open Sans
- 文本对齐：居中
- 文字颜色：#ffffff
- 文字大小：3vw（桌面）、5vw（平板电脑）、7vw（手机）
- 文本行高：1em
间距
我们还使用以下自定义填充值在模块的顶部和底部添加了一些空间：
- 顶部填充：2.5vw（桌面）、3.5vw（平板电脑）、5vw（手机）
- 底部填充：2.5vw（台式机）、3.5vw（平板电脑）、5vw（手机）
添加第 2 行
列结构
继续使用以下列结构添加第二行：
浆纱
还没有添加任何模块，打开行设置并允许行占据屏幕的整个宽度。
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 宽度：100%
- 最大宽度：100%
间距
继续进行间距设置，然后添加一些自定义的顶部和底部填充。
- 顶部填充：2vw（桌面）、4vw（平板电脑）、6vw（手机）
- 底部填充：2vw（桌面）、4vw（平板电脑）、6vw（手机）
展示
为了确保两列在较小的屏幕尺寸上保持彼此相邻，我们将向行的主要元素添加一行 CSS 代码。
display: flex;
将 Blurb 模块添加到第 1 列
添加内容
是时候开始添加菜单项了！ 将新的 Blurb 模块添加到该行的第一列并输入您选择的一些内容。
选择图标
接下来选择一个图标。
添加链接
并输入与菜单项匹配的页面链接。
- 标题链接网址：#
图标设置
转到设计选项卡并相应地更改图标设置：
- 图标颜色：#ff3314
- 图标位置：顶部
- 使用图标字体大小：是
- 图标字体大小：2vw（桌面）、3vw（平板电脑）、4vw（手机）
标题文字设置
还要修改标题文本设置。
- 标题字体：PT Serif
- 标题字体样式：下划线
- 标题下划线颜色：#ff3314
- 标题文本对齐：居中
- 标题文字大小：1.8vw（桌面）、2.3vw（平板电脑）、3.3vw（手机）
正文设置
然后，更改正文文本设置。
- 正文字体：Lato
- 正文对齐方式：居中
- 正文颜色：#c6c6c6
- 正文大小：0.9vw（桌面）、1.7vw（平板电脑）、2.1vw（手机）
- 车身线高：1.8em
浆纱
并使用以下值更改不同屏幕尺寸的模块宽度：
- 宽度：60%（桌面）、65%（平板）、80%（手机）
动画片
我们还在动画设置中删除了图标动画。
- 图标动画：无动画
克隆 Blurb 模块并在第 2 列中放置重复项
完成 Blurb 模块后，您可以克隆它并将副本放置在该行的第二列中。
更改副本
确保您更改了副本。
更改图标
随着图标。
更改链接
以及与新菜单项匹配的页面链接。
克隆行两次
完成行中的两个 Blurb 模块后，您可以克隆整行两次。
单独更改每个 Blurb 复制的副本、图标和链接
确保单独更改每个模糊菜单项的副本、图标和链接。
4. 使部分具有粘性
默认
将要显示的所有元素添加到您的部分后，您可以通过将以下两行 CSS 代码添加到该部分的主要元素，使该部分粘在页面的左上角：
position: fixed; top: 0;
悬停（重要！）
在该部分的主要元素上启用悬停选项，并确保该部分在此状态下也保持粘性。
position: fixed;
5. 选择一种方法：A) 悬停菜单或 B) 单击菜单
A) 悬停菜单
默认部分大小
在本教程的下一部分中，您需要选择一种首选方法； 悬停或单击的菜单。 悬停菜单的行为类似于较小设备上的点击菜单。 如果您决定选择悬停选项，请再次打开部分设置，转到大小设置并相应地更改菜单的宽度和高度：
- 宽度：8vw（桌面）、12vw（平板电脑）、20vw（手机）
- 高度：7.4vw（桌面）、12vw（平板电脑）、16vw（手机）
悬停部分大小
修改悬停时的值以创建扩展菜单。
- 宽度：80%
- 高度：100vh
B) 点击菜单
将 CSS 类添加到文本模块
如果您想要一个仅在单击时打开的菜单，则必须打开包含菜单符号的文本模块。 转到高级选项卡并添加自定义 CSS 类。
- CSS 类：全宽开放
将 CSS 类添加到部分
接下来打开部分设置并添加一个不同的 CSS 类。
- CSS 类：平滑变换
截面尺寸
接下来我们将修改部分的宽度和高度。
- 宽度：8vw（桌面）、12vw（平板电脑）、20vw（手机）
- 高度：7.4vw（桌面）、12vw（平板电脑）、16vw（手机）
向页面添加代码
将新行添加到部分底部
现在，要创建切换效果，我们需要一些 JQuery 和 CSS 代码。 首先将代码模块添加到部分底部的新行。
将代码模块添加到部分并插入 JQuery 切换代码
复制以下几行 JQuery 代码并将它们粘贴到代码框中：
<script>
jQuery(function($){
$(".fullwidth-open").click(function() {
$('.smooth-transform').toggleClass('smooth-transform-active');
});
});
</script>
将自定义 CSS 代码添加到页面设置
最后但同样重要的是，接下来打开页面设置并添加以下 CSS 代码行：
.smooth-transform-active {
height: 100vh;
width: 80%;
}
.smooth-transform {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
预览
现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。
悬停方式
桌面
移动的
点击模式
桌面
移动的
最后的想法
在这篇文章中，我们向您展示了如何创建一个漂亮的模糊模块，该模块在点击/悬停时展开（取决于您的偏好）。 这是为您的菜单添加额外交互性同时在所有屏幕尺寸上保持响应结果的好方法。 如果您有任何问题或建议，请务必在下方评论区留言！
如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。