如何为WordPress创建自定义动画汉堡菜单
VPS1352主机测评网(www.vps1352.com)
本文链接：https://www.vps1352.com/11572.html
如果您使用移动设备浏览互联网，您将注意到汉堡菜单的大量网站.这些是隐藏在"汉堡"图标后面的菜单，用户可以轻拍，以揭示整个菜单.
它们被称为"汉堡菜单"的原因是因为通常代表它们的图标-三行.它看起来像一只小汉堡，或者至少是这个理论.我喜欢我的汉堡，瘦瘦的瘦！
但是旁边命名，能够将汉堡菜单添加到WordPress网站，这将增强对移动设备访问人员的用户体验.
您可以添加插件以创建汉堡菜单.或者您可以将主题安装在那里(如我们的一个).但是，如果你有自己的主题，你宁愿自己添加汉堡菜单吗?
在这篇文章中，我将向您展示如何做到这一点.拍摄通过标准WordPress菜单屏幕添加的菜单，我将向您展示如何添加一些CSS和JavaScript，即将现有菜单转换为小屏幕上的汉堡菜单.继续阅读，或使用以下链接跳转:
- 你需要的是什么
- 桌面菜单版本
- 添加汉堡图标
- 隐藏在大屏幕上的汉堡图标
- 为您的移动汉堡菜单添加样式
- 添加脚本
您需要的
与此帖子一起，您需要:
- WordPress运行的开发安装，该站点已经创建了一个菜单.
- 您自己的主题或第三方主题的儿童主题.不要直接编辑第三方主题或更新时将删除更改.相反，如果您需要，请创建一个子主题.
我要将这个代码应用于我自己的网站.它针对主导航菜单，在我的情况下有一个CSS类的.menu.main.如果您的不同，您需要编辑针对这些类的任何CSS，因此它适用于您自己的主题.
所以，让我们开始！
桌面菜单版本
现在我的菜单在桌面上看起来很好-它位于我的头横幅下方的内容:
但是在移动事物上并不那么漂亮.在iPhone 7上，菜单跨越多行拆分，甚至不一致，它也妨碍了内容:
移动菜单添加汉堡图标之前.
我可以通过居中菜单项来改进，但是它会占用太多空间.相反，我要添加汉堡菜单，以便在小屏幕上，菜单被隐藏，直到汉堡图标上的用户抽头.
添加汉堡图标
第一步是添加汉堡图标.您在主题的标题中执行此操作.
注意:如果您使用的是第三方主题，请创建子主题，将标题为主题复制到父主题中，并在子主题中编辑新文件.
在主导航菜单下方添加一个链接.这是我的:
加载GIST 0C50DA9EA9CC63F8D8846B58E68A3F09
这会创建一个与togglenav类的链接-因为它会打开和关闭导航.此链接内部是汉堡图标，其使用HTML符号创建.不需要自定义图形-整洁，呵呵?
请注意，链接无处可见-它只是一个hashtag，而不是一个网址.
这就是您需要添加到您的标题文件中的所有内容，因此您现在可以保存并关闭.
如果刷新屏幕，您将看到汉堡图标出现:
我们不希望在网站的桌面版本上可见，因此我们将在下一步中解决此问题.
隐藏在大屏幕上的汉堡图标
现在是它开始汇集的位-造型.您可以在主题的样式表中添加所有这些.如果您使用的是子主题，您已经为其创建了样式表，并且可以在那里添加所有内容.
注意:我的主题是响应的，但它不是移动的，所以我将在My Media查询中使用Max-Wide.如果您的主题是移动的，首先需要更改您将此代码添加到媒体查询的方式.
让我们从拨动图标的大屏幕(或桌面)版本开始.将此添加到您的样式表:
加载GIST 0C50DA9EA9CC63F8D8846B58E68A3F09
这使得新链接(和图标)默认是不可见的.我已经包含!important，否则可以被其他链接样式覆盖.
现在是我的网站在大屏幕上:
它已经消失了.我们需要再次将其再次切换为较小的屏幕，但我们很快就会到达这一点.
为移动汉堡菜单添加样式
现在您需要添加菜单的移动版本的所有样式，这将在图标上的用户抽头时出现.
首先，在样式表中创建媒体查询:
加载GIST 0C50DA9EA9CC63F8D8846B58E68A3F09
我的目标是最大宽度为480px的屏幕，但如果您愿意，您可以选择更宽的屏幕，特别是如果您的菜单很大.
现在让我们在该媒体查询中添加一些样式.首先，我们将重新打开图标和样式:
加载GIST 0C50DA9EA9CC63F8D8846B58E68A3F09
将向小屏幕转回图标，然后添加定位和颜色，以及设置悬停和有效样式，以覆盖主题中的任何现有风格以获取链接.
现在让我们的菜单本身样式.在媒体查询中添加此项:
加载GIST 0C50DA9EA9CC63F8D8846B58E68A3F09
让我们走过这是什么:
- 它使菜单作为整个显示器作为
inline-block，具有实心的白色背景和相对定位-因此我们可以使用对儿童元素的绝对定位. - 它将
ul元素默认设置为不可见.当我们添加那个时，javascript会将其幻灯片幻灯片.它还为列表添加了位置和颜色样式. - 它删除了浮点数的列表项，并将它们作为块显示.
现在保存样式表.在汉堡菜单正常工作之前，您需要添加最后一步-一个脚本.
添加脚本
此步骤由两个步骤组成:询问脚本并将代码添加到它.让我们开始巩固它.
在主题中添加一个名为脚本和内部的文件夹，该文件夹为一个名为 burger-menu-script.js 的空文件.
现在打开主题函数文件并将其添加到其中:
加载GIST 0C50DA9EA9CC63F8D8846B58E68A3F09
这会正确阐明刚刚创建的脚本.现在您需要为其添加一些代码.
打开该文件并添加此脚本:
加载GIST 0C50DA9EA9CC63F8D8846B58E68A3F09
这需要我们创建的.toggle-nav元素，并为其创建单击呼叫，这将在某人点击它时触发.然后，它使用.slideToggle切换导航菜单，并在单击链接时插入.它还停止链接以其默认方式行为.
最后，保存文件.
所以现在这是一个小屏幕上的网站:
小设备上的汉堡图标.
以及点击该图标时，将出现菜单:
使用菜单显示的移动站点.
和这里是我在手机上访问网站时如何工作的视频(视频有点生涩，所以您可能希望访问移动设备上的网站以查看它).
汉堡菜单动画在操作中.
所有完成！现在我需要做的就是在我的标题横幅上工作，在小屏幕上也看起来非常丑陋！
添加汉堡菜单将增强移动移动中的用户体验
如果您按照上面的步骤(编辑CSS以适应主题，如果需要)，您将创建一个简单的汉堡菜单，当人们在移动设备上访问它时，您可以在您的网站上提高用户体验.如果您需要，可以修改样式，更改图标的颜色，调整菜单的宽度，以及您需要为您工作的内容.
