GG资源网

如何为 WordPress 创建自定义动画汉堡菜单

如果您使用移动设备浏览互联网,您会注意到许多带有汉堡菜单的网站。 这些菜单隐藏在用户可以点击的“汉堡”图标后面,以显示整个菜单。

它们被称为“汉堡菜单”的原因是通常代表它们的图标——三行。 它看起来像一个小汉堡,或者至少理论上是这样。 我喜欢我的汉堡不那么瘦!

但是除了命名之外,能够向您的 WordPress 网站添加汉堡菜单将增强在移动设备上访问的人们的用户体验。

您可以添加一个插件来创建汉堡菜单。 或者你可以安装一个已经存在的主题(比如我们的一个)。 但是,如果您有自己的主题并且更愿意自己添加汉堡菜单怎么办?

在这篇文章中,我将向您展示如何做到这一点。 以通过标准 WordPress 菜单屏幕添加的菜单为例,我将向您展示如何添加一些 CSS 和 Javascript,将您现有的菜单变成小屏幕上的汉堡菜单。 继续阅读,或使用以下链接跳转:

  • 你需要什么
  • 桌面菜单版本
  • 添加汉堡图标
  • 在大屏幕上隐藏汉堡图标
  • 为您的移动汉堡菜单添加样式
  • 添加脚本

你需要什么

要继续阅读这篇文章,您需要:

  • 运行已创建菜单的站点的 WordPress 开发安装。
  • 您自己的主题或第三方主题的子主题。 请勿直接编辑第三方主题,否则您的更改将在更新时被删除。 相反,如果需要,请创建一个子主题。

我打算将此代码应用于我自己的网站。 它以主导航菜单为目标,在我的例子中,它有一个 CSS 类 .menu.main. 如果您的不同,您将需要编辑针对这些类的任何 CSS,以便它正确应用于您自己的主题。

那么,让我们开始吧!

桌面菜单版本

现在我的菜单在桌面上看起来不错——它位于内容上方的标题横幅下方:

启动前的桌面主页

但是在移动设备上并不是那么漂亮。 在 iPhone 7 上,菜单被分成多行,甚至不一致,它也妨碍了内容:

添加汉堡图标之前的移动菜单
添加汉堡图标之前的移动菜单。

我可以通过将菜单项居中来改善这一点,但那样会占用太多空间。 相反,我将添加一个汉堡菜单,以便在小屏幕上隐藏菜单,直到用户点击汉堡图标。

添加汉堡图标

第一步是添加汉堡图标。 您可以在主题的 header.php 文件中执行此操作。

注意:如果您使用第三方主题,请创建一个子主题,将 header.php 文件从父主题复制到其中,然后在您的子主题中编辑新文件。

在主导航菜单下方添加一个链接。 这是我的:

加载要点 0c50da9ea9cc63f8d8846b58e68a3f09

这将创建一个带有类 togglenav 的链接——因为它会打开和关闭导航。 此链接内部是汉堡图标,它是用 HTML 符号创建的。 不需要自定义图形——整洁,对吧?

请注意,链接无处可去——它只是一个标签,而不是 URL。

这就是您需要添加到头文件中的所有内容,因此您现在可以保存并关闭它。

如果你刷新你的屏幕,你会看到汉堡图标出现了:

桌面菜单中的汉堡图标

我们不希望它在网站的桌面版本上可见,因此我们将在下一步中修复它。

在大屏幕上隐藏汉堡图标

现在来说一下它开始融合在一起的地方——造型。 您可以将所有这些添加到主题的样式表中。 如果您使用的是子主题,则您已经为它创建了一个样式表,并且可以在那里添加所有内容。

注意:我的主题是响应式的,但它不是移动优先的,所以我将在我的媒体查询中使用 max-width。 如果您的主题首先是移动主题,您需要更改将此代码添加到媒体查询的方式。

让我们从切换图标的大屏幕(或桌面)版本开始。 将此添加到您的样式表中:

加载要点 0c50da9ea9cc63f8d8846b58e68a3f09

默认情况下,这会使新链接(和图标)不可见。 我已经包括 !important 否则它可以被其他链接样式覆盖。

现在这是我在大屏幕上的网站:

没有汉堡图标的桌面菜单

它消失了。 对于较小的屏幕,我们需要再次关闭它,但我们很快就会谈到这一点。

为您的移动汉堡菜单添加样式

现在您需要为移动版菜单添加所有样式,当用户点击图标时会出现。

首先,在您的样式表中创建一个媒体查询:

加载要点 0c50da9ea9cc63f8d8846b58e68a3f09

我的目标屏幕最大宽度为 480 像素,但如果您愿意,您可以选择更宽的屏幕,尤其是在您的菜单很大的情况下。

现在让我们在该媒体查询中添加一些样式。 首先,我们将重新打开图标并设置样式:

加载要点 0c50da9ea9cc63f8d8846b58e68a3f09

这将为小屏幕重新打开图标,并添加位置和颜色,以及设置悬停和活动样式以覆盖链接主题中的任何现有样式。

现在让我们设置菜单本身的样式。 在您的媒体查询中添加:

加载要点 0c50da9ea9cc63f8d8846b58e68a3f09

让我们来看看这是做什么的:

  • 它使菜单作为一个整体显示为 inline-block,具有纯白色背景和相对定位——因此我们可以对子元素使用绝对定位。
  • 它设置 ul 元素默认不可见。 当我们添加它时,Javascript 会将其滑入,这将使其出现。 它还为列表添加位置和颜色样式。
  • 它删除列表项的浮动并将它们显示为一个块。

现在保存您的样式表。 在您的汉堡菜单正常工作之前,您需要添加最后一步——脚本。

添加脚本

这一步包括两个步骤:查询脚本和添加代码。 让我们从排队开始。

在您的主题中添加一个名为 脚本 在其中,一个名为 汉堡菜单script.js.

现在打开您的主题函数文件并将其添加到其中:

加载要点 0c50da9ea9cc63f8d8846b58e68a3f09

这会正确地将您刚刚创建的脚本排入队列。 现在您需要向其中添加一些代码。

打开该文件并添加此脚本:

加载要点 0c50da9ea9cc63f8d8846b58e68a3f09

这需要 .toggle-nav 我们创建的元素并为它创建了一个点击调用,当有人点击它时会触发它。 然后它使用 .slideToggle 单击链接时切换导航菜单。 它还停止以默认方式运行的链接。

最后,保存您的文件。

所以现在这是一个小屏幕上的网站:

小屏幕上的汉堡图标
小型设备上的汉堡图标。

当我点击该图标时,会出现菜单:

显示菜单的移动网站
显示菜单的移动网站。

这是我在手机上访问该网站时它如何工作的视频(该视频有点生涩,因此您可能希望在移动设备上访问该网站以实时观看)。

手机汉堡菜单
正在运行的汉堡菜单动画。

全做完了! 现在我需要做的就是在我的标题横幅上工作,它在小屏幕上看起来也很丑!

添加汉堡菜单将增强移动设备上的用户体验

如果您按照上述步骤操作(根据需要编辑 CSS 以适合您的主题),您将创建一个简单的汉堡菜单,当人们在移动设备上访问您的网站时,该菜单可以改善用户体验。 如果您需要,您可以修改样式、更改图标的颜色、调整菜单的宽度,以及任何您需要的东西来使其适合您。

标签:

由于网站搬家,部分链接失效,如无法下载,请联系站长!谢谢支持!
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途!
3. 分享目的仅供大家学习和交流,请不要用于商业用途!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 本站所有资源来源于站长上传和网络,如有侵权请邮件联系站长!
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
9. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
10.如果您购买了某个产品,而我们还没来得及更新,请联系站长或留言催更,谢谢理解 !
GG资源网 » 如何为 WordPress 创建自定义动画汉堡菜单

发表回复

CAPTCHAis initialing...