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

如果您使用移动设备浏览互联网,您将注意到汉堡菜单的大量网站.这些是隐藏在"汉堡"图标后面的菜单,用户可以轻拍,以揭示整个菜单.

它们被称为"汉堡菜单"的原因是因为通常代表它们的图标-三行.它看起来像一只小汉堡,或者至少是这个理论.我喜欢我的汉堡,瘦瘦的瘦!

但是旁边命名,能够将汉堡菜单添加到WordPress网站,这将增强对移动设备访问人员的用户体验.

您可以添加插件以创建汉堡菜单.或者您可以将主题安装在那里(如我们的一个).但是,如果你有自己的主题,你宁愿自己添加汉堡菜单吗?

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

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

您需要的

与此帖子一起,您需要:

  • WordPress运行的开发安装,该站点已经创建了一个菜单.
  • 您自己的主题或第三方主题的儿童主题.不要直接编辑第三方主题或更新时将删除更改.相反,如果您需要,请创建一个子主题.

我要将这个代码应用于我自己的网站.它针对主导航菜单,在我的情况下有一个CSS类的.menu.main.如果您的不同,您需要编辑针对这些类的任何CSS,因此它适用于您自己的主题.

所以,让我们开始!

桌面菜单版本

现在我的菜单在桌面上看起来很好-它位于我的头横幅下方的内容:

desktop home page before starting

但是在移动事物上并不那么漂亮.在iPhone 7上,菜单跨越多行拆分,甚至不一致,它也妨碍了内容:

mobile menu before adding burger icon 移动菜单添加汉堡图标之前.

我可以通过居中菜单项来改进,但是它会占用太多空间.相反,我要添加汉堡菜单,以便在小屏幕上,菜单被隐藏,直到汉堡图标上的用户抽头.

添加汉堡图标

第一步是添加汉堡图标.您在主题的标题中执行此操作.

注意:如果您使用的是第三方主题,请创建子主题,将标题为主题复制到父主题中,并在子主题中编辑新文件.

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

加载GIST 0C50DA9EA9CC63F8D8846B58E68A3F09

这会创建一个与togglenav类的链接-因为它会打开和关闭导航.此链接内部是汉堡图标,其使用HTML符号创建.不需要自定义图形-整洁,呵呵?

请注意,链接无处可见-它只是一个hashtag,而不是一个网址.

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

如果刷新屏幕,您将看到汉堡图标出现:

burger icon in desktop menu

我们不希望在网站的桌面版本上可见,因此我们将在下一步中解决此问题.

隐藏在大屏幕上的汉堡图标

现在是它开始汇集的位-造型.您可以在主题的样式表中添加所有这些.如果您使用的是子主题,您已经为其创建了样式表,并且可以在那里添加所有内容.

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

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

加载GIST 0C50DA9EA9CC63F8D8846B58E68A3F09

这使得新链接(和图标)默认是不可见的.我已经包含!important,否则可以被其他链接样式覆盖.

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

desktop menu with no burger icon

它已经消失了.我们需要再次将其再次切换为较小的屏幕,但我们很快就会到达这一点.

为移动汉堡菜单添加样式

现在您需要添加菜单的移动版本的所有样式,这将在图标上的用户抽头时出现.

首先,在样式表中创建媒体查询:

加载GIST 0C50DA9EA9CC63F8D8846B58E68A3F09

我的目标是最大宽度为480px的屏幕,但如果您愿意,您可以选择更宽的屏幕,特别是如果您的菜单很大.

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

加载GIST 0C50DA9EA9CC63F8D8846B58E68A3F09

将向小屏幕转回图标,然后添加定位和颜色,以及设置悬停和有效样式,以覆盖主题中的任何现有风格以获取链接.

现在让我们的菜单本身样式.在媒体查询中添加此项:

加载GIST 0C50DA9EA9CC63F8D8846B58E68A3F09

让我们走过这是什么:


  • 它使菜单作为整个显示器作为inline-block,具有实心的白色背景和相对定位-因此我们可以使用对儿童元素的绝对定位.
  • 它将ul元素默认设置为不可见.当我们添加那个时,javascript会将其幻灯片幻灯片.它还为列表添加了位置和颜色样式.
  • 它删除了浮点数的列表项,并将它们作为块显示.

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

添加脚本

此步骤由两个步骤组成:询问脚本并将代码添加到它.让我们开始巩固它.

在主题中添加一个名为脚本和内部的文件夹,该文件夹为一个名为 burger-menu-script.js 的空文件.

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

加载GIST 0C50DA9EA9CC63F8D8846B58E68A3F09

这会正确阐明刚刚创建的脚本.现在您需要为其添加一些代码.

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

加载GIST 0C50DA9EA9CC63F8D8846B58E68A3F09

这需要我们创建的.toggle-nav元素,并为其创建单击呼叫,这将在某人点击它时触发.然后,它使用.slideToggle切换导航菜单,并在单击链接时插入.它还停止链接以其默认方式行为.

最后,保存文件.

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

burger icon on small screen 小设备上的汉堡图标.

以及点击该图标时,将出现菜单:

mobile site with menu displayed 使用菜单显示的移动站点.

和这里是我在手机上访问网站时如何工作的视频(视频有点生涩,所以您可能希望访问移动设备上的网站以查看它).

Burger menu for mobile 汉堡菜单动画在操作中.

所有完成!现在我需要做的就是在我的标题横幅上工作,在小屏幕上也看起来非常丑陋!

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

如果您按照上面的步骤(编辑CSS以适应主题,如果需要),您将创建一个简单的汉堡菜单,当人们在移动设备上访问它时,您可以在您的网站上提高用户体验.如果您需要,可以修改样式,更改图标的颜色,调整菜单的宽度,以及您需要为您工作的内容.

VPS1352主机测评网(www.vps1352.com)
本文链接:https://www.vps1352.com/11572.html

2
订阅评论
提醒
0 评论
内联反馈
查看所有评论