如何为 WordPress 添加无链接的导航菜单

网站的导航菜单是网站主体内容的结构化展现，所有网站都会有导航菜单。如果运营一个包含大量丰富内容的多层次结构网站的时候，就需要设置结构清晰且逻辑合理的导航菜单。默认情况下，在 WordPress 中设置菜单时，每个菜单项目都需要添加一个链接，并在用户点击时跳转到相应的页面。那么，如何为 WordPress 网站添加无链接的导航菜单呢？

我们这里所说的无链接菜单，指的是不会在用户点击时跳转到某个页面，而是只打开下拉列表展示所属的子菜单项。本文，我们将介绍，如何为 WordPress 网站添加无链接的导航菜单。

创建没有链接的菜单项

在 WordPress 的管理仪表盘中，转到 外观 > 菜单。

在添加菜单项下，单击自定义链接。如果没有看到此选项，请滚动到页面顶部并在右上角查找 Screen Options。

单击它，查找自定义链接，然后选中此框。

现在让我们转到如下图所示的自定义链接，在 URL 字段中输入井号(#)。在链接文本字段中输入想要创建的菜单项的名称。

完成后，按添加到菜单按钮。保存更改后，新菜单项将出现在右侧的菜单结构中。

现在可以从右侧的菜单中打开自定义的菜单项目。如果刚刚在 URL 字段中留下“#”号，新菜单项将显示为已链接，但是在单击它时，将返回到他们当前正在浏览页面的顶部。如果删除“#”号标签并将该字段留空，则正在浏览的页面将在单击菜单项时刷新页面。

如何使菜单项不可点击

如果在点击菜单时，既不想返回顶部，也不想刷新当前页面，我们可以通过一些简单的 CSS 样式设置使链接无法点击。在外观 > 菜单中单击页面顶部的屏幕选项并确保选中CSS 类框。

接下来，转到取消链接的菜单项并查找 CSS Classes 选项。在该字段中设置一个 ClASSES 类，如“unclickable”，然后点击保存菜单。

在创建了CSS类后，将以下代码添加到CSS：

.unclickable > a {
   pointer-events: none;
}

这样我们就成功的为 WordPress 添加了无链接的导航菜单。