WordPress divi主题

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

by | May 13, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

本周,作为我们正在进行的 Divi 设计计划的一部分,我们将向您展示如何使用 Divi 的 Mechanic Layout Pack 在悬停时创建扩展的粘性菜单。 我们将处理两个不同的设计示例,您可以从头开始重新创建并应用于您正在创建的任何类型的网站! 菜单将在桌面屏幕大小上悬停时显示,并在点击移动设备时激活。

让我们开始吧!

预览

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

示例 #1

桌面

扩展粘滞菜单

移动的

扩展粘滞菜单

示例 #2

桌面

扩展粘滞菜单

移动的

扩展粘滞菜单

一般步骤

禁用固定导航

转到 Divi 主题选项

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

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

WordPress divi主题

扩展粘性菜单

禁用固定导航

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

  • 固定导航栏:已禁用

扩展粘性菜单

隐藏页面上的主菜单栏

打开页面设置

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

扩展粘性菜单

添加自定义 CSS

通过将以下几行 CSS 代码添加到您的页面来隐藏主菜单。

#main-header {
display: none;
}

扩展粘性菜单

将新部分添加到页尾

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

扩展粘性菜单

间距

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

fiverr建站WordPress程序员
  • 顶部填充:0px
  • 底部填充:0px

扩展粘性菜单

添加新行

立柱结构

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

扩展粘性菜单

浆纱

在不添加任何模块的情况下,打开行设置并让行占据屏幕的整个宽度。

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

扩展粘性菜单

独立站选品工具

间距

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

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

扩展粘性菜单

主要元素

通过将两行 CSS 代码添加到行的主要元素,我们允许整行粘在页面底部。

bottom: 0px;
position: fixed;

扩展粘性菜单

Z 指数

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

高质量外链购买

扩展粘性菜单

将代码模块添加到列

在样式标签之间添加 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

扩展粘滞菜单

将文本模块添加到列

添加内容

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

JasperAI 10000字免费额度试用

扩展粘性菜单

默认背景颜色

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

  • 背景颜色:#ffffff

扩展粘性菜单

悬停背景颜色

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

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

扩展粘性菜单

WordPress备份工具updrafplus

渐变背景

并添加默认渐变背景。

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

扩展粘性菜单

默认文本设置

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

  • 文字字体:Khand
  • 文字字体粗细:粗体
  • 文字颜色:#021827
  • 文字大小:3vh
  • 文本方向:中心

扩展粘性菜单

悬停文本设置

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

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

扩展粘性菜单

链接文本设置

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

扩展粘性菜单

默认列表文本设置

继续使用默认列表文本设置并根据需要设置样式。 确保您在默认状态下使用“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 类。

扩展粘性菜单

过渡

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

  • 转换持续时间:100ms

扩展粘性菜单

重新创建示例 #2

扩展粘滞菜单

将文本模块添加到列

添加内容

继续第二个例子! 在这里,我们将再次使用段落文本样式添加“≡ Menu”,并使用无序列表添加菜单项。 我们还将分别为每个菜单项添加一个链接。

扩展粘性菜单

默认背景颜色

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

  • 背景颜色:#ffffff

扩展粘性菜单

悬停背景颜色

修改悬停时的背景颜色。

  • 背景颜色:#f71535

扩展粘性菜单

默认文本设置

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

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

扩展粘性菜单

悬停文本设置

在悬停时修改这些设置。

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

扩展粘性菜单

链接文本设置

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

扩展粘性菜单

默认列表文本设置

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

  • 无序列表字体: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

扩展粘性菜单

边界

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

扩展粘性菜单

盒子阴影

我们还将添加一个盒子阴影来在页面上创建深度。

  • 盒子阴影模糊强度:1000px
  • 阴影颜色:rgba(0,0,0,0.68)

扩展粘性菜单

CSS 类

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

扩展粘性菜单

过渡

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

  • 转换持续时间:100ms

扩展粘性菜单

预览

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

示例 #1

桌面

扩展粘滞菜单

移动的

扩展粘滞菜单

示例 #2

桌面

扩展粘滞菜单

移动的

扩展粘滞菜单

最后的想法

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

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

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题