为垂直子菜单导航设计样式的 3 种创意方法

已发表: 2017-08-17

在今天的帖子中，我们将为您提供三种不同的方式来设置垂直导航子菜单的样式。在之前的一篇博文中，我们已经向您展示了如何制作一个透明的垂直导航，在从桌面查看网站时与您的网站重叠。

我们将要分享的示例将建立在透明的垂直导航之上。这样，您就可以立即创建从 A 到 Z 的垂直透明导航。在这篇文章中，您将体验不同的样式设置，这些设置可以使您的垂直子菜单栩栩如生。

在向您展示示例之前，看看没有任何更改的子菜单可能会很有趣。像往常一样，垂直子菜单接管主菜单项的设置。不做任何额外修改，子菜单如下所示：

现在，让我们看一下我们将向您展示如何重新创建的三个示例。

第一个例子：

第二个例子：

第三个例子：

实现垂直子菜单的一般步骤

订阅我们的 YouTube 频道

在深入研究我们提供的不同示例之前，我们将在开始之前处理两个必要的一般步骤。在根据您的需要设计子菜单项之前，您必须做两件事：将子菜单项添加到您的菜单中，并查找我们子菜单项的不同 CSS ID。完成这些步骤后，我们将分享实现示例结果所需的 CSS 代码。

由于有三种方法可以将 CSS 代码添加到您的 Divi 网站，我们将分别处理每种方法。但是，您可以使用您喜欢的方式为每个示例添加 CSS 代码。

添加子菜单项

我们要做的第一件事（如果您还没有这样做的话）是添加子菜单项。在我们的示例中，我们仅向“我们的模型”菜单项添加了一些子菜单项，以向您展示如何操作。但是，您也可以将更改应用于其他菜单项。

如果您在WordPress 仪表板上，请转到外观 > 菜单。如果您已经创建了一个菜单，请使用该菜单。如果没有，请从制作新菜单开始。然后，将主菜单项添加到您的菜单中。完成后，您可以添加子菜单项。添加一个子菜单项，只需将其放在主菜单项下即可。对要添加到垂直导航的所有子菜单项执行此操作。

查找您的子菜单项的各个 CSS ID

在我们的示例中，我们必须分别对每个子菜单项进行一些 CSS 修改。这就是为什么我们必须在源代码中查找 CSS ID。每个项目都有不同的 ID。您必须根据您网站上专门使用的 CSS ID 修改 CSS 代码。这些可能与这些示例中使用的不同。这就是为什么我们将简要地向您展示从何处获取 ID，以便您可以特别对您的项目进行修改。

转到您的主页，将鼠标放在菜单上并开始检查代码。您将看到 CSS ID 出现在所选的菜单项上。复制子菜单列表中的每个 CSS ID 并保存以备后用。

现在您已经完成了两个步骤，您可以继续创建我们制作的示例。

创建第一个示例

在文章的这一部分，我们将向您展示如何重新创建垂直子菜单的第一个示例。如您所见，结构非常简单，但为您的网站增添了额外的色彩。主菜单项很简单，并使用透明背景色。当然，您可以在子菜单中保持同样的简单性。或者，您可以选择多一点关注它。

正在使用的颜色将背景图像与渐变叠加相匹配。如果您想获得简单而适度的结果，建议您在子菜单中保持这种颜色的一致性。

通过主题选项添加 CSS 代码

有多种方法可以将 CSS 代码添加到您的页面。例如，您可以将 CSS 代码添加到特定的页面。您还可以通过主题选项或主题定制器将其添加到整个网站。对于此示例，我们只需通过主题选项添加代码即可。如果您在 WordPress 仪表板上，请转到Divi > 主题选项 > 向下滚动常规选项卡并将以下代码粘贴到自定义 CSS 框中：

.nav li ul {
border: none !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background-color: rgba(60,105,205,0.1) !important;
border-radius: 5px;
margin-bottom: 10px;
}
.sub-menu #menu-item-205212 {
background-color: rgba(60,105,205,0.3) !important;
border-radius: 5px;
margin-bottom: 10px;
}
.sub-menu #menu-item-205213
{
background-color: rgba(60,105,205,0.5) !important;
border-radius: 5px;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 1px 0px 1px 0 !important;
text-align: center !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 5% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}

#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\e089" !important;
}

将代码中的以下 CSS ID 替换为适用于您的子菜单的 CSS ID。在这篇文章的上一步中，我们已经向您展示了在哪里可以找到它们。

创建第二个示例

下一个示例我们将向您展示如何使其具有一定的渐变效果。正在使用的不同颜色与正在使用的背景图像一致。我们为完整的子菜单添加了渐变背景，并为每个子菜单项添加了一些单独的透明颜色。

特别为一页添加 CSS 代码

尽管您可能希望将此代码添加到您的完整网站，但我们将向您展示如何使此示例特别适用于某一页面。如果您不想将 CSS 代码行特别添加到一个页面，请随时通过 Theme Options（如第一个示例所示）或通过 Theme Customizer（如下一个示例所示）添加它。

首先打开或创建要添加子菜单设计的页面。现在，单击 Divi 构建器右上角的以下按钮：

在出现的屏幕中，将以下 CSS 代码行复制并粘贴到自定义 CSS 字段中：

.nav li ul {
border: none !important;
background: -webkit-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: -o-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: -moz-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
padding: 3px !important;
width: 80% !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background-color: rgba(255,255,255,0.6) !important;
margin-bottom: 3px;
}
.sub-menu #menu-item-205212 {
background-color: rgba(255,255,255,0.4) !important;
margin-bottom: 3px;
}
.sub-menu #menu-item-205213
{
background-color: rgba(255,255,255,0.2) !important;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 1px 0 1px 0 !important;
text-align: center !important;
color: #000000 !important;
width: 80% !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 10% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}

#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\61" !important;
}

将 CSS 代码中的以下子菜单项替换为您自己的：

创建第三个示例

我们将要分享的最后一个例子是如何制作具有悬停效果的。通过将这种悬停效果添加到您的子菜单中，您将以一种很好的方式与您的观众互动，而不会让您的主菜单太忙。由于子菜单仅在移动到主菜单项上时才会出现。因此，您的访问者不会经常遇到这种影响。

通过主题定制器为一页添加 CSS 代码

对于最后一个示例，我们将向您展示如何通过主题定制器添加 CSS 代码。如果您在WordPress 仪表板上，请转到外观 > 自定义 > 附加 CSS > 并复制并粘贴以下代码行：

.nav li ul {
border: none !important;
width: 95% !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205211:hover {
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
.sub-menu #menu-item-205212 {
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
.sub-menu #menu-item-205212:hover {
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205213
{
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205213:hover
{
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 5px 0 5px 0 !important;
text-align: center !important;
color: #000000 !important;
width: 95% !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 10% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}
#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\61" !important;
}

获取子菜单项的 CSS ID，并将示例中的 CSS ID 替换为您的：

就是这样！您的设计现在应该如上例所示。

最后的想法

在这篇文章中，我们向您展示了如何利用垂直导航发挥创意的一些可能性。进一步来说; 我们向您展示了如何让您的垂直子菜单看起来很棒。如果你按照这篇文章一步一步来，你应该能够完美地重新创建垂直子菜单。如果您有任何问题或建议；请在下面的评论部分告诉我们！

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