如何为您的 Divi 网站创建垂直导航菜单（或标题）

对于某些需要更多菜单项的网站，垂直导航菜单可以派上用场。 水平菜单很难适应所有需要的菜单链接，尤其是在较小的浏览器宽度上。 在本教程中，我们将向您展示如何使用 Divi Theme Builder 构建自定义垂直导航菜单。 这将为您提供更多空间来展示您的 WordPress 菜单项。 而且您将完全有能力将额外的 Divi 模块添加到垂直接头并使用 Divi builder 进行设计。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

免费下载布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要上传模板，请导航到 WordPress 网站后端的 Divi Theme Builder。

上传全局默认网站模板

然后，在右上角，您会看到一个带有两个箭头的图标。 单击该图标。

导航到导入选项卡，上传您可以在本文中下载的 JSON 文件，然后单击“导入 Divi 主题生成器模板”。

保存 Divi 主题生成器更改

上传文件后，您会注意到默认网站模板中有一个新的全局页眉和页脚。 一旦您希望激活模板，请立即保存 Divi Theme Builder 更改。

让我们进入教程，好吗？

第 1 部分：构建新的全局标题

在本教程中，我们将使用 Divi Theme Builder 在全局标题中构建垂直导航菜单。 但是，我们将在文章末尾向您展示如何将相同的菜单添加到页面模板的正文中，以防万一您想在站点的主菜单之外使用它。

首先，转到 WordPress 仪表板并导航到 Divi > Theme Builder。

然后单击默认网站模板的“添加全局标题”区域并从下拉列表中选择“构建全局标题”。

然后选择“从头开始构建”选项。

第 2 部分：设计垂直剖面布局

在全局标题布局编辑器中，打开已有的常规部分的设置并更新以下内容。

• 宽度（桌面）：300px
• 宽度（平板电脑和手机）：100%

• 高度（桌面）：100vh
• 高度（平板电脑和手机）：自动

• 填充（桌面）：4vh 顶部，0px 底部
• 填充（平板电脑和手机）：0px 顶部，0px 底部

通过添加框阴影继续设计，如下所示：

• 盒子阴影：见截图
• 框阴影垂直位置：0px
• 框阴影模糊强度：20px
• 框阴影传播强度：-10px
• 阴影颜色：rgba(0,0,0,0.3)

要确保垂直导航菜单在用户滚动时在左侧保持可见，请将位置更新为固定并更新 z 索引，如下所示：

• 位置：固定
• Z指数：9999

为确保我们能够看到将扩展到该部分之外的子菜单导航，请将以下自定义 CSS 添加到主元素：

overflow: visible !important;

现在，您的部分处于模板左侧的垂直布局中。

第 3 部分：设计垂直菜单

有了这个部分，我们就可以设计垂直菜单了。 为此，我们将使用带有一些自定义 CSS 的菜单模块来设置垂直显示的导航样式。

我们还将使用 vh 长度单位，以便菜单可以在不同浏览器高度下很好地缩放。

添加行

首先，向该部分添加一列行。

然后按如下方式更新行设置：

尺寸和填充

• 天沟宽度：1
• 宽度：100%
• 最大宽度：80%
• 填充（桌面）：3vh 顶部，3vh 底部
• 填充（平板电脑和手机）：0px 顶部，0px 底部

边界

• 边框宽度：1px
• 边框颜色：#eeeeee

添加菜单模块

在单列行内，添加一个新的菜单模块。

选择要在内容切换下显示的菜单。

然后在徽标切换下将您的站点徽标添加为动态内容。

在设计选项卡下，更新以下内容：

• 风格：居中
• 菜单字体：Nunito Sans
• 菜单文字颜色：#535b7c
• 菜单文字大小：18px（桌面），14px（平板电脑和手机）
• 菜单行高：2em
• 下拉菜单行颜色：#535b7c
• 下拉菜单活动链接颜色：#535b7c

• 购物车图标颜色：#535b7c
• 搜索图标颜色：#535b7c
• 汉堡菜单图标颜色：#535b7c

• 填充（桌面）：2vh 顶部，2vh 底部
• 填充（桌面）：顶部 10 像素，底部 10 像素

第 4 部分：为菜单添加自定义 CSS

菜单需要一些自定义 CSS 来获得我们希望实现的垂直导航。 首先，进入高级选项卡并将以下自定义 CSS 添加到菜单链接和菜单徽标。

菜单链接 CSS（桌面）：

width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;

菜单链接 CSS（平板电脑）：

width: auto;
border:none;

菜单标志 CSS：

margin-bottom: 20px;

接下来，将自定义 CSS 类添加到菜单模块，如下所示：

CSS 类：et-vert-menu

将用于在我们将使用代码模块添加的外部自定义 CSS 中定位此特定菜单。

使用代码模块添加自定义 CSS

在菜单模块下，添加一个新的代码模块。

然后将以下代码粘贴到代码框中（一定要放在样式标签之间）：

/*Style Vertical Navigation Menu*/  
.et-vert-menu .et_pb_menu__menu>nav>ul {
  flex-direction: column;
  margin-left: 0px !important;
  margin-right: 0px !important;
  width: 100%;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
  margin: 10px 0 !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
  display:block !important;
  padding: 0px !important;
  }
  .et-vert-menu .et_pb_menu__menu>nav>ul ul {
    padding: 0px !important;
    top: 0px !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
  left:calc(100% - 1px) !important;
  top:0px !important;
  }
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
  content: "5" !important; /*change arrow icon for submenu*/
  right: 20px !important;
  }
.et-vert-menu .nav li ul {
    left: calc(100% - 1px) !important; /*align submenu to the right of menu link*/
  }
@media all and (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
    width: 100%; /*width of the vertical navigation menu*/
  }
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/  
#et-main-area { 
  width: calc(100% - 300px); 
  margin-left: 300px;
}
}

第 5 部分：设计按钮和社交媒体关注图标

现在菜单已经完成，我们可以添加一个按钮和一些社交媒体跟随链接来完成垂直标题。

添加行

在当前行下添加一个新的单列行。

添加按钮

然后向该行添加一个新的按钮模块。

更新按钮设置如下：

• 按钮对齐：居中
• 按钮文字大小：18px（桌面），14px（平板电脑和手机）
• 按钮文字颜色：#ffffff
• 按钮背景颜色：#535b7c
• 按钮边框宽度：0px

然后转到高级选项卡并将以下自定义 CSS 粘贴到主元素：

主要元素 CSS（桌面）

display:block;
width: 100%;

主要元素 CSS（平板电脑）

display:inherit;

添加社交媒体关注图标

在按钮下，添加社交媒体关注模块。

在内容选项卡下添加所需的社交网络。

在设计选项卡下，更新以下内容：

• 模块对齐：居中
• 图标颜色：#535b7c

然后打开各个网络的设置，删除背景色。

然后添加一点上边距，如下所示：

• 边距：3vh 顶部

更新行设置

社交媒体关注图标完成后，打开行设置并调整以下内容：

• 天沟宽度：1
• 填充（桌面）：3vh 顶部，0px 底部
• 填充（平板电脑和手机）：10px 顶部

保存布局和模板

完成后，保存布局和模板。

最后结果

这是实时页面上的最终结果。

如何将垂直导航菜单添加到页面模板的正文区域

如果要将垂直导航菜单添加到页面布局（而不是全局页眉），则必须先将部分布局保存到 Divi 库。

为此，请打开全局标题布局编辑器并将垂直部分（包含菜单）保存到您的 Divi 库中。

然后退出布局编辑器并创建一个新模板并将其分配给您想要的任何页面。 单击以构建页面模板的自定义正文。

选择从头开始构建它。

向布局添加一个新的全角部分。

然后将全角帖子内容模块添加到该部分。

删除页面顶部的默认常规部分，然后打开全角部分的设置并将以下自定义 CSS 添加到主元素：

主要元素 CSS（桌面）

width: calc(100% - 300px);
margin-left:300px !important;

主要元素 CSS（平板电脑）

width: 100%;

在常规部分下，单击以添加新部分，然后在从库添加选项卡下，选择您之前保存到库中的垂直菜单部分。

因为我们不希望该部分显示在移动设备上，所以打开该部分设置并禁用该部分在平板电脑和手机上的可见性。

然后在部分布局中打开代码模块并替换此代码片段......

#et-main-area { 
width: calc(100% - 300px); 
margin-left: 300px;
}

有了这个…

#main-header, #main-footer { 
width: calc(100% - 300px); 
margin-left: 300px;
}

这将移动主页眉和页脚以适应页面模板左侧的固定垂直菜单。 这是使用 Divi 的默认页眉和页脚在实时页面上的样子。

最后的想法

此处提供的垂直导航菜单已固定位置。 但是，如果您需要更多空间来放置其他菜单项或内容，您可以将该部分的位置更改为绝对位置。 您还可以将垂直溢出更改为滚动，以使用户能够滚动菜单项（请注意，您将无法使用此溢出设置查看/使用子菜单）。

垂直部分设置也为创建一些自定义侧边栏打开了大门。 我希望这对未来的项目有用。

我期待在评论中收到您的来信。

干杯!