3 种创造性的方式来设计你的 Divi 垂直导航的活动链接

已发表: 2017-09-11

在这个 Divi 教程中，我们将向您展示几种有趣的方式来设置垂直导航中活动链接的样式。本教程是上一个教程的后续教程，我们向您展示了如何为一页 Divi 网站在滚动时创建活动链接。因此，在您尝试不同的样式设置方式之前，您应该首先在滚动浏览上一篇文章时设置活动链接，因为我们将使用的代码将进一步构建于此。

在本教程中您应该记住的一点是，您只能在保存页面后才能看到结果。仅通过预览您的页面，更改将不会显示。

3 种创造性的方式来设计你的 Divi 垂直导航的活动链接

订阅我们的 YouTube 频道

这个怎么运作

为了创建在您向下滚动页面时自动调整活动链接的导航，我们使用了 Page Scroll to ID 插件，可轻松帮助您获得想要的结果。此外，该插件还为您提供了不同的选项，您可以在设置中手动选择。

该插件有助于识别访问者在您网站上的位置，并将根据他们当前正在查看的网站部分更改菜单项。这是一个很小的互动，肯定会帮助您的访问者在整个单页浏览器中导航。他们会自动知道他们正在浏览您页面的哪个部分，以及他们离他们可能感兴趣的其他部分有多远。

注意：请注意，此方法仅适用于仅由一页组成的网站。

激活垂直导航

如果您使用垂直导航，我们将向您展示如何制作的示例将特别有价值。因此，请继续在 Theme Customizer 中启用垂直导航（如果您在上一篇文章中还没有这样做的话）。

如果您在 WordPress 仪表板上，请转到外观 > 自定义 > 标题和导航 > 标题格式 > 启用垂直导航。

活动链接

活动链接样式 #1

我们要向您展示的第一个示例是一个发光的示例。每次访客经过其中一个部分时，另一个菜单项就会开始发光。这是一种微妙但美丽而优雅的方式，可以帮助您的访问者浏览单页浏览器。

活动链接

主菜单栏设置

首先对主菜单栏进行一些更改。如果您在 WordPress 仪表板上，请转到外观 > 自定义 > 标题和导航 > 主菜单栏并进行以下修改：

隐藏徽标图像：启用
文字大小：24
字母间距：-1
字体: Happy Monkey
文字颜色：#FFFFFF
活动链接颜色：#FFFFFF
背景颜色：rgba(255,255,255,0)
下拉背景色：rgba(255,255,255,0)

活动链接

将 CSS 代码添加到主题选项

接下来您需要做的是添加一些 CSS 代码。您可以通过多种方式将 CSS 代码添加到您的网站。我们将在这些示例中处理三种方法，从主题选项开始。如果您在 WordPress 仪表板上，请转到 Divi > 主题选项 > 向下滚动“常规”选项卡，然后将以下 CSS 代码行放在“自定义 CSS”框中：

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight{ 
text-shadow:  0 0 10px #fff,  0 0 30px #fff,  0 0 50px #e3e98e,  0 0 70px #e3e98e, 0 0 90px #e3e98e;
border-top: 1px dotted #FFFFFF;
border-bottom: 1px dotted #FFFFFF;
padding-top: 15px;
}
nav#top-menu-nav {
width:80% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
text-align: center;
margin-bottom: 15px;
padding-left: 25%;
}
#et-top-navigation {
padding-top: 100% !important;
}
#top-menu {
text-align: center;
padding-left: 10%;
}}

活动链接样式 #2

第二种活动链接样式具有非常干净和优雅的外观。像往常一样，活动链接会根据您向下滚动一页网站的方式而变化。单击其中一个菜单项时，将应用相同的样式。

活动链接

主菜单栏设置

我们将首先执行与本文第一个示例中相同的操作；对主菜单栏进行修改。为此，请转到 WordPress 仪表板中的外观 > 自定义 > 标题和导航 > 主菜单栏，并确保您具有以下设置：

隐藏徽标图像：启用
文字大小：24
字母间距：2
字体: 龙虾
文字颜色：#FFFFFF
活动链接颜色：#FFFFFF
背景颜色：rgba(255,255,255,0)
下拉菜单背景颜色：rgba(255,255,255,0)

活动链接

将 CSS 代码添加到主题定制器

如上例所述，您可以通过多种方式将 CSS 代码添加到您的网站。除了将自定义代码添加到主题选项之外，您还可以将其添加到主题定制器。如果您在 WordPress 仪表板上，请转到外观 > 自定义 > 附加 CSS 并将以下代码行放在自定义 CSS 字段中：

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
padding: 0.5em 1.9em;
}
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
height: 20px;
width: 20px;
position: absolute;
content: '';
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
}
#top-menu .current-menu-item a.mPS2id-highlight:before {
left: 0;
top: 0;
border-left: 4px solid #000000;
border-top: 4px solid #FFFFFF;
-webkit-transform: translate(100%, 50%);
transform: translate(100%, 50%);
}
#top-menu .current-menu-item a.mPS2id-highlight:after {
border-right: 4px solid #000000;
border-bottom: 4px solid #FFFFFF;
-webkit-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
} 
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
opacity: 1;
}
nav#top-menu-nav {
width:87% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

活动链接样式 #3

我们选择与您分享的第三种活动链接样式主要关注用作菜单项的关键字。通过对文本阴影使用正确的设置，相同的文本将围绕菜单项，强调访问者在您网站上的位置。

活动链接

主菜单栏设置

对于最后一个示例，首先对主菜单栏进行一些更改。如果您在 WordPress 仪表板上，请转到外观 > 自定义 > 标题和导航 > 主菜单栏，并对垂直导航进行以下更改：

隐藏徽标图像：启用
文字大小：16
字母间距：2
字体： Josefin Slab
字体样式：大写
文字颜色：#FFFFFF
活动链接颜色：#FFFFFF
背景颜色：rgba(255,255,255,0)
下拉菜单背景颜色：rgba(255,255,255,0)

活动链接

特别是在一页中添加 CSS 代码

您必须添加 CSS 代码的另一种选择是将其添加到特定的页面。使用 Divi Builder 打开首页（以及放置所有内容的页面），然后单击以下图标：

活动链接

单击该图标后，将以下 CSS 代码行放入自定义 CSS 字段中：

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
margin-left: 80px;
text-shadow:0 0 0 #000, -70px 0 0 rgba(255, 255, 255, .4), 70px 0 0 rgba(255, 255, 255, .4), 0 25px 0 rgba(255, 255, 255, .4) , 0 -25px 0 rgba(255, 255, 255, .4) ; }
}
nav#top-menu-nav {
width:95% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

最后的想法

在这篇文章中，我们向您展示了一些不错且简单的方法来设置菜单中活动链接的样式。这篇文章是上一篇文章的后续文章，我们向您展示了如何为一页 Divi 网站在滚动时创建活动链接。请记住，您必须先保存更改，然后才能看到结果，仅预览页面并不能完成这项工作。如果您有任何问题或建议；确保您在下面的评论部分发表评论！

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！

精选图片来自 Botond1977/shutterstock.com