简化在 WordPress 中创建超级菜单的过程

在上一篇文章中，我研究了如何确定大型菜单何时适合您的网站以及如何使用插件来创建大型菜单。

但如果您感觉更有雄心，您可能更愿意将自己的大型菜单编码到您的主题中。这给您带来的好处是能够按照您想要的方式设计菜单，并确保它与您的主题一致。

在本教程中，我将向您展示如何编写大型菜单并将其添加到您的主题中。

你需要什么

要学习本教程，您需要以下内容：

• WordPress 的开发安装（在一切正常运行之前，请勿将其添加到您的实时网站中）。
• 您自己可以编辑的主题，或者如果您使用的是第三方主题，则为该主题的子主题。
• 代码编辑器。

我正在使用第三方主题 (ColorMag)，因此我将为其创建一个子主题并向其中添加我的样式。

超级菜单如何工作

我们的大型菜单将采用 WordPress 中的菜单系统输出的代码并将其显示为大型菜单。我不会向网站添加额外的菜单：如果您愿意，可以这样做，但由于这个大型菜单无法在较小的屏幕上工作，因此我更喜欢坚持使用相同的菜单。这是因为我喜欢让移动设备和桌面设备上的用户访问相同的导航。

大型菜单的样式将仅适用于较大的屏幕。对于较小的屏幕，我建议使用汉堡菜单，该菜单在用户点击汉堡（三条水平线）图标之前是不可见的。您可以在我们的汉堡菜单编码教程中了解如何编码汉堡菜单。

开始使用

第一步是向菜单中添加大量菜单项。这意味着您将有大量内容来填充您的大型菜单。

我在菜单中添加了很多链接，并具有三个级别的导航。当用户将鼠标悬停在顶级菜单项上时，该菜单项下面的项目将出现在大型菜单中。现在，它们出现在标准布局中：

让我们首先识别网站前端此菜单输出的代码。这是我的菜单的（编辑后的）代码。我取出了一些 li 元素并删除了大部分 CSS 类，以便您可以看到 HTML 的结构：

<nav id="site-navigation" class="main-navigation clearfix" role="navigation"><div class="inner-wrap clearfix"> <p class="menu-toggle"></p> <div class="menu-primary-container"> <ul id="menu-main-nav" class="menunav-menu" aria-expanded="false"> <li><a>Home</a></li> <li> <a>Top Level Item</a> <ul class="sub-menu"> <li> <a>Second Level Item 1</a> <ul class="sub-menu"> <li><a>Third Level Item 1</a></li> <!-- more li elements --> </ul> </li> <li> <a>Second Level Item 2</a> <ul class="sub-menu"> <li><a>Third Level Item 5</a></li> <!-- more li elements --> </ul> </li> <li> <a>Second Level Item 3</a> <ul class="sub-menu"> <li> <a>Third Level Item 7</a> </li> <!-- more li elements --> </ul> </li> </ul> </li> <li> <a>Another Top Level Item</a> <ul class="sub-menu"> <li> <a>Second Level Item 4</a> <ul class="sub-menu"> <li><a>Third Level Item 12</a></li> <!-- more li elements --> </ul> </li> </ul> </li> </ul> </div> </div> </nav>登录后复制

上一篇：了解 Headless WordPress 及其优点

下一篇：WooCommerce 全面介绍：利用产品标签、类别和属性