首页 » 博文 » wpbeginner » 最佳插件 » 如何在 WordPress 中添加全屏响应式菜单

如何在 WordPress 中添加全屏响应式菜单

您是否正在寻找在 WordPress 中添加全屏响应式菜单的方法?

当您的用户单击或点击汉堡包图标时,您的网站菜单的全屏叠加将使用精美的动画显示。

在本文中,我们将向您展示如何在 WordPress 中添加全屏响应式菜单,而无需编写任何代码。

如何在 WordPress 中添加全屏响应式菜单

为什么要在 WordPress 中添加全屏响应式菜单?

精心设计的菜单可帮助您的访问者在您的WordPress 网站上找到适合自己的方式。但在使用智能手机的小屏幕时,点击标准菜单可能很困难。

许多网站的移动用户已经超过桌面用户。因此,我们建议您预览 WordPress 网站的移动版本,以了解您的网站在移动设备上的外观。

全屏响应菜单将自动调整以适应不同的屏幕尺寸。由于所有可用空间都用于菜单,因此在智能手机和平板电脑上导航更加容易。

让我们看看如何在 WordPress 中添加全屏响应式菜单。

如何在 WordPress 中添加全屏响应式菜单

您需要做的第一件事是安装并激活全屏菜单 – 移动友好和响应式插件。您可以查看我们有关如何安装 WordPress 插件的分步指南以了解更多详细信息。

激活后,您应该前往WordPress 管理菜单中的全屏菜单选项页面来配置插件设置。它将自动带您进入“设置”选项卡。

全屏菜单选项设置页面

首先选中“激活动画全屏菜单”复选框以启用菜单。

最好首先选中“仅对管理员用户显示菜单”框。这将使您在配置菜单时看到所做的更改,但在您完成之前,您网站的访问者将无法看到它。

完成后,不要忘记返回并取消选中该框。

其他设置允许您仅在移动设备上显示菜单、单击或滚动时关闭菜单以及隐藏特定页面上的菜单。对于我们的示例,我们将不选中这些设置,但您可以根据自己的网站的需要随意自定义它们。

全屏菜单设计和外观

接下来,我们将定制菜单的设计。为此,您需要单击页面顶部的“设计/外观”选项卡。在此页面上,您可以选择菜单的颜色、字体和动画设置。

全屏菜单选项设计页面 - 颜色

在页面顶部,您会注意到两种颜色设置。第一种颜色用于汉堡菜单图标。这将显示在您网站的右上角。当您的访问者单击或点击它时,将显示或隐藏全屏菜单。

第二种颜色设置用于菜单的背景。

当您单击每个框时,将出现一个调色板。您可以单击要使用的颜色或输入其十六进制代码。

选择菜单颜色后,您应该向下滚动页面到“字体/外观”部分。在这里,您可以选择用于菜单文本的字体颜色、系列和大小。

在本教程中,我们将保留默认设置,即使用主题中的字体。我们推荐此设置,因为它将与您网站的设计相匹配。此外,加载额外的字体可能会影响WordPress 网站的性能和速度

全屏菜单设计 - 字体

还有一些设置可以在特定页面上显示横向菜单,并在主菜单不够高时滚动主菜单。在本教程中,我们将保留这些设置,但您可以随意在您自己的WordPress 博客或网站上进行试验。

之后,您需要向下滚动到“动画设置”部分。您可以调整两个主要设置。

全屏菜单设计 - 动画

第一个是“动画类型”。这使您可以在激活菜单时选择动画方向。您可以选择从上到下、从左到右、从右到左。

第二个设置是将鼠标悬停在菜单条目上时获得的效果。选项包括填充线、背景颜色和带圆角边框的背景颜色。

全屏菜单内容

最后,您需要滚动回页面顶部并单击“菜单内容”选项卡。在这里,您可以选择将显示在全屏菜单上的 WordPress 菜单。

全屏菜单内容 - 导航菜单

在顶部的“选择菜单”旁边,您需要从下拉列表中选择一个菜单。如果您尚未创建导航菜单,请查看我们有关如何在 WordPress 中添加导航菜单的指南。

如果您希望在菜单屏幕上显示其他内容,则可以将其添加到标记为“免费 HTML/短代码”的下一部分中。只需在编辑器框中输入您的内容并添加您想要的任何媒体文件即可。此内容将显示在菜单下方。

还有一个复选框,其中包含指向您的隐私政策页面的链接。不过,许多网站所有者更喜欢将其添加到页脚而不是主菜单中。

接下来,您可能想添加社交图标。这些将显示在全屏菜单底部的一行中。

要添加它们,只需向下滚动到“社交图标”部分并输入图标的标题,例如“Facebook”。之后,选择适当的图标并输入您的社交页面的 URL。

全屏菜单内容 - 社交图标

您可以通过单击“添加另一个图标”按钮来添加更多图标。

最后,您可以将本机WordPress 搜索栏添加到响应式菜单的顶部。您需要滚动到“菜单内容”页面的底部,然后选中“添加搜索栏?” 盒子。如果您愿意,还可以键入一些占位符文本。

全屏菜单内容 - 搜索栏

最后,单击“保存更改”按钮来存储您的设置。

您现在可以访问您的网站以查看正在运行的全屏响应菜单。我们建议您调整浏览器的大小,以查看菜单在不同屏幕尺寸上的表现。

这是它在我们的演示网站上的外观。

全屏菜单预览

一旦您对全屏菜单感到满意,请不要忘记导航回全屏菜单选项并取消选中“仅对管理员用户显示菜单”。单击“保存更改”按钮后,您网站的访问者将能够访问该菜单。

我们希望本文能帮助您了解如何向您的 WordPress 网站添加全屏响应式菜单。您可能还想了解如何嵌入 Facebook 视频或查看我们的WordPress 最佳联系表单插件列表。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Scroll to Top