如何在WordPress网站中添加一个惊人的巨型菜单

技术教程 2022年3月22日
1572 0

Mega菜单是大型WordPress网站上的常见设计模式.这些站点可以具有复杂的信息架构，具有许多不同的部分和小节.通过将类似的链接组合在一起，Mega菜单使用户简单地快速查找相关信息.

关于Mega Menus，可用性专家Jakob Nielsen说:

"[Mega菜单]是一个优秀的设计选择，可容纳大量选项或透视下级别站点页面."

在这篇文章中，我们将看看使用Mega菜单的WordPress网站的示例，为什么如果您运行大型网站，以及帮助您实现Mega菜单的插件，它们将作为一种选择.

  • 使用巨型菜单的WordPress网站有效地
  • 如何WordPress Mega菜单包含哪些功能?

  • Mega菜单WordPress插件

    • max mega菜单(免费)

      • WordPress的Mega Menu插件- AP Mega菜单(免费)

    • ubermenu
    • Mega主菜单
    • wp mega菜单pro
    • 英雄菜单
    • noo菜单


  • 如何使用max mega菜单创建Mega菜单

    • 使用Max Mega菜单进行平板电脑和移动式


  • 如何使用ubermenu创建Mega菜单

    • 与Ubermenu高级项目

      • 可以做的很酷的东西

    • 使用Ubermenu进行平板电脑和移动式


  • 是每个人的Mega菜单吗?

使用Mega菜单的WordPress站点有效地

巨型菜单在各种各样的网站上都有.

Joanie服装

Joanie Clothing Shop All mega menu Joanie服装店所有Mega菜单

Joani服装网站上的Mega菜单项链接到Woocommerce产品类别.

斯坦福日常

The Stanford Daily Sports mega menu 斯坦福日常运动mega菜单

斯坦福日常新闻网站使用Mega菜单在分类中显示类别，即体育>秋季体育>现场曲棍球.

pousta

Pousta Singular mega menu poutsa奇异兆菜单

功能图像也用于POUSTA的MEGA菜单，沿网站突出显示重要的故事.

格鲁吉亚州立大学

Georgia State University Alumni mega menu 佐治亚州立大学校友Mega菜单

佐治亚州立大学网站上的校友菜单项是另一个域的自定义链接.

jamie oliver

Jamie Oliver Recipes mega menu jamie oliver食谱mega菜单

最巨型的Mega菜单！杰米奥利弗的网站包括平板电脑和移动的单独汉堡菜单.

英国划船

British Rowing Knowledge mega menu 英国划船知识巨型菜单

什么功能可以WordPress Mega菜单包含?

以及菜单链接，它们可以具有:

  • 章节标题
  • 图像
  • 图标
  • 描述
  • 小部件，可以包括图像或视频

大多数Mega菜单在悬停，悬停意图上显示，或单击水平菜单栏上.一些插件也可以做垂直巨型菜单.

悬停意图是一个jQuery插件，它试图为用户的鼠标移动的含义.因此，快速拖动可能无法打开菜单，而慢速故意在菜单项上移动.

Mega菜单WordPress插件

如果您考虑向WordPress站点添加Mega菜单，则有许多免费和付费插件.

max mega菜单(免费)

max mega menu header

最大Mega菜单功能包括:


  • Accessibility友好:支持键盘导航.

  • 子菜单转换的动画.
  • 隐藏菜单项或禁用链接的选项.
  • 高级版本，具有更多功能，包括垂直和手风琴菜单.

WordPress的Mega Menu插件- AP Mega菜单(免费)

Mega Menu header

Mega菜单插件功能包括:

  • 垂直巨型菜单.
  • 通过拖放创建菜单.
  • 隐藏手机菜单的选项.
  • 褪色或幻灯片过渡.
  • 高级版提供更多功能e.g更多图标并添加您自己的图标.

ubermenu

UberMenu header.

ubermenu功能包括:

  • 标签子子菜单.
  • 动态生成菜单.
  • 移动和平板电脑友好的菜单.
  • 菜单动画.

Mega主菜单

mega main menu header

Mega主菜单功能包括:

  • 1600+图标.
  • wpml兼容.
  • 添加其他菜单项(徽标，搜索).

WP Mega Menu Pro

wp mega menu pro

WP Mega菜单Pro功能包括:

  • 标签巨型菜单.
  • 14可用皮肤.

英雄菜单

Hero Menu

英雄菜单功能包括:

  • Woocommerce已启用.
  • 菜单的背景.
  • 粘性菜单.

noo菜单

Noo Menu header

noo菜单功能包括:

  • 透明菜单.
  • 保存/加载预设.

如何创建带有MAX Mega Menu的Mega菜单

让我们看看如何创建Mega菜单.在此示例中，我使用羽衣甘蓝主题创建了一个基于食品的网站，不同的食谱.

第一步是使用外观>菜单创建菜单，确保您适当地嵌套子菜单项.

Mega菜单只能在顶级菜单项上创建，而不是子菜单项.要访问Plugin的菜单选项，将鼠标悬停在菜单项上，然后选择 Mega菜单.

要添加图像，请使用图像窗口小部件- WordPress 4.8中的一个新功能.

A Max Mega Menu image widget max mega菜单图像窗口小部件

这是我的测试网站前端的样子:

Max Mega Menu with image on the front end max mega菜单，前端上的图像

要添加视频，请使用WordPress 4.8的视频小部件并从URL添加视频.或者，将视频的嵌入代码添加到文本窗口小部件.

这是它看起来的样子:

Max Mega Menu with video 带视频 的最大mega菜单

还可以通过插件中的图标部分添加菜单图标.

max mega菜单中的默认dashicons

要添加字体令人敬畏，泛型或自定义图标需要Pro版本，其中单个站点需要23美元.

您可以选择菜单中显示的列数并将多列布局组合在一起.

Max Mega Menu 2 column layout max mega menu 2列布局

将两列布局放在一起后，这里的结果是前端的结果:

Max Mega Menu 2 column layout for Soups submenu max mega菜单2汤子菜单

我使用最近的帖子小部件使用缩略图插件添加最新帖子.要将它们水平排列，我在一列布局中使用了一个小部件加上一些CSS.图像不完美地排列的唯一原因是它们不同的高度！

这是我用来实现此结果的CSS:

和另一个看我的兆菜单如何在我的测试网站的前端进入，这次有三列:

Latest posts in a 3 column layout 三列布局中的最新帖子

在Mega菜单中添加或更改项目自动保存它们.如果您在菜单结构中添加新项目，请不要忘记单击保存菜单.

使用用于平板电脑和移动的最大Mega菜单

在我的手机上，我最终用了两个汉堡菜单，一个来自我的主题，一个由max mega菜单生成的.主题菜单已禁用，因此它将最适合使用CSS.

由于没有悬停状态，鼠标悬停和悬停意图事件作为点击事件，点击打开子菜单.

含有Mega菜单的顶级菜单项作为子菜单(例如，主要课程)无法在手机上访问，除非用户抽头并选择在新选项卡中打开.

解决方法是使用另一个插件仅使用移动菜单.

max mega菜单没有在移动设备上最佳地显示所有内容.我从两个到一个更改了列的数量，但是，如图所示，它会使汤菜单上的内容混合.

Max Mega Menu on Android phone with mixed up columns Max Mega Menu on Android phone with mixed up columns Android手机上的Max Mega菜单，混合列

视频小部件也没有正确显示.对小屏幕尺寸的响应性有一个问题.

Video widget display cut off on Android phone 视频小部件显示在Android手机上切断

如何使用ubermenu

创建Mega菜单

ubermenu对兆菜单提供更精细的粒度控制.每个单个菜单项都可以自定义.还有一个全局控制面板，可以设置和继承某些选项.默认图像大小.

有超过20个内置的皮肤.我选择了"简单的绿色".

个人项目控件是:

  • 一般 -各种设置，包括文本对齐选择和添加CSS类或ID.
  • 图标 -设置与菜单显示的图标.对于您需要Ubermenu图标扩展(8美元)的全部范围.
  • 图像 -任何将与菜单项相邻显示的图像.
  • layout -选择所使用的任何图像的列显示和位置.
  • 子菜单 -配置子菜单显示.
  • 自定义内容 -快速添加HTML和短路而不使用小部件.
  • 窗口小部件 -将小部件区域插入菜单，然后选择列数.
  • 自定义样式 -选择不同菜单项的颜色和填充.
  • 响应 -隐藏或禁用不同断点的菜单.
  • drecated -如果您是新用户，您可以安全地忽略此操作.

您可以使用ubermenu高级项目

#1.使用Google地图和联系表单创建联系人页面的子菜单

我通过使用设置为两列布局的窗口小部件区域项来实现此目的.两个小部件被添加到外观>小部件中命名的ubermenu小部件区域.

UberMenu widget with Google map and Contact form UberMenu widget with Google map and Contact form ubermenu小部件，谷歌地图和联系表单

#2.创建自定义二列布局

我用汤中的柱子替换了这个汤.

UberMenu Soups submenu using Columns UberMenu Soups submenu using Columns ubermenu汤子菜单使用列

#3.在"博客"下添加最后三个博客帖子

这比Max Mega菜单中的相同更容易，因为我能够选择自动三列布局."动态帖子"项目内置了一些高级WP查询.如果我想要，我可以按类别过滤，改变了排序顺序或排除的帖子.

UberMenu 3 column Blog with Dynamic Posts ubermenu 3列博客，带有动态帖子

#4.使用选项卡式子菜单

离开食物主题，我安装了Woocommerce及其虚拟数据.

这是我商店的菜单设置，使用选项卡块.

UberMenu setup for Shop with Tabs UberMenu setup for Shop with Tabs 使用选项卡的商店的Ubermenu设置

我调整了每个产品类别的动态帖子的数量，以优雅地适合子菜单.

UberMenu shop with tabbed submenu ubermenu商店，带选项卡上子菜单

使用ubermenu进行平板电脑和移动

在我的手机上，我发现点击顶级菜单项一旦打开了子菜单，再次打开该页面.用户可以访问顶级菜单项是有益的，但我发现特定的菜单行为略有意外.

每个子菜单在底部有一个关闭链接，关闭它.

我的柱子布局被保留为我的汤子菜单.

UberMenu Soups submenu on Android phone UberMenu Soups submenu on Android phone ubermenu汤子菜单上Android手机

但是，我继续在列布局中工作的视频小部件存在问题.带有嵌入式视频的自定义内容项更好地工作，但在移动设备上被切断.

UberMenu with Custom Content embedded video on Android phone ubermenu与自定义内容嵌入视频在Android手机上

选项卡接口从桌面上的水平标签到移动的垂直选项卡.

UberMenu tabbed submenu on Android phone UberMenu tabbed submenu on Android phone <fige5aption class = ubermenu选项卡上的Android手机上的子菜单

是每个人的mega菜单?

巨型菜单是强大的，适用于当前事务，教育和电子商务等某些行业.

它们可以是:

  • 突出显示产品类别和销售商品在线商店.
  • 让用户了解的网站和解释他们的purpos e.
  • show特色图片帖子或产品照片.

但它们不适合各种类型.如果您使用Mega菜单有一个小而简单的网站将是矫枉过正的.

如您所见，需要仔细检查移动设备上的Mega菜单行为，以避免显示和交互问题.加上移动设备可能不可取的大型菜单.

还有Mega菜单的潜在SEO问题-太多的链接可能导致稀释"链接汁".

最后，当用户尝试与他们交互时，巨型菜单太快消失了，是一个禁忌.

无论您采取的任何方法，重要的是要逻辑地规划您的网站导航，并避免用户必须达到太多点击以达到预期目标.

还应该:


    每页都有一个可见的搜索框.
  1. 在顶级页面上列出子页面.

    2. 使用站点地图考虑

mega(1)WordPress(893)菜单(19)

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

♥赞5

相关文章

发表回复