如何使用?

Mega Menu 是最受欢迎和有效的菜单类型之一,尤其是在桌面上。用户自然期望在网站头部下方找到一个 Mega Menu。然而,Shopify 的默认菜单通常很简单,缺乏强大的结构,并且几乎不支持图像。这就是为什么你应该使用 Navi+ Mega Menu。

主要好处:

  • 完全替代 Shopify 的简单默认 Mega Menu
  • 提供多种展示风格,包括 图像网格多级 布局,带来丰富、专业的体验
  • 在移动设备和桌面上无缝工作,提供一致的体验

常见问题:

1. 我还没有决定是使用免费版还是付费版。我可以试用专业菜单模板吗?

当然可以!菜单组主要是为了帮助初学者避免被 Navi+ 中的高级功能所压倒 😄。最好的方法是试用专业菜单,以探索所有功能和布局选项。之后,你可以简单地删除任何不需要或觉得不合适的菜单。

2. 在这里创建菜单会立即在我的网站上显示吗?

还没有。你需要发布正确的菜单才能在你的网站上显示。别担心——这很简单!

3. 如果我选择了错误的模板或犯了错误怎么办?

完全没问题。你可以随时删除它并创建一个新的。如果你正在测试一个菜单并想尝试另一个模板,你可以保存当前的菜单作为备份文件,稍后再重新打开。你甚至可以复制和粘贴菜单之间的部分(通过打开两个浏览器标签)以保留你之前的工作。尽管去尝试吧!

4. 我应该只创建一个菜单还是多个菜单?

你应该创建多个菜单。只有活动菜单会显示在你的网站上,但你可以准备多个版本——通过选择不同的模板或克隆菜单。菜单可以根据页面类型(主页、产品、集合...)、设备(移动或桌面)或 URL 关键字进行配置以显示/隐藏。因此,尽管去构建适合每种情况的菜单吧!

第一步:编辑菜单树

1.1. 理解菜单树

菜单树 是任何菜单中最重要的部分——它定义了结构。

这里是一个完整桌面 Mega Menu 的菜单树示例:

[+] 菜单  
[+] 类别  
[+] 字母  
滑板  
   - 组件(组名)  
   - 桌子  
   - 车架  
   - 更多(蓝色链接到详细信息..)  
   - 完整  
        - 帽子(组名)  
        - Burton Lunchlap 耳罩帽  
        - Volcom Ramp Stone 可调帽  
        - ...  
[+] 配件  
[+] 博客  
[+] 支持  
[+] 更多

这是一个 3 级菜单树。第 1 级包括 菜单类别、字母、滑板…更多..滑板 有 5 个 2 级子菜单:组件、桌子、完整(包含一些 3 级菜单子菜单:帽子、Burton Lunchlap 耳罩帽…)

你将花费大部分时间来构建这个菜单树,以帮助客户找到他们所寻找的内容。

目录:一个 1 级菜单项,显示为选项卡在选项卡栏上。全山:当你点击目录时出现的 2 级菜单项。
Cruise Flex, Balance Ride:当你点击全山时出现的 3 级菜单项。

1.2. 与菜单树的基本交互

你可以拖放菜单项上下或左右以更改它们在菜单树中的位置和父子关系。

当你悬停在任何菜单项上时,你会看到额外的选项:编辑该项的详细信息,从菜单树中删除它,或将其复制并粘贴到其他地方。

提示: 你可以通过在两个浏览器标签中打开 Navi+ 应用程序来从一个菜单复制菜单项到另一个菜单。

1.3. 重要!删除示例菜单项,仅保留你想要的结构。

这是使用 Navi+ 创建菜单时的常见情况。当你创建一个新菜单时,我们会包含一个完整的示例,带有流行的菜单项,以展示布局想法并让你根据需要复制/粘贴。然而,如果你是 Navi+ 的新手并使用 Starter 计划,你会看到许多红色 (i) 警告,表示不支持的功能,例如上传图像或使用高级交互。

如果你喜欢这些高级功能,考虑升级到 Business 或 Elite 计划。但如果你想继续使用 Starter 计划,请找到并删除带有红色 (i) 警告的菜单项。

重要提示: 当删除确认出现时,打开“下次不再询问”以更快删除。

1.4. 向菜单树添加菜单项

要添加菜单项,你有两个选项:

选项 1 **(如果你是 Navi+ 新手,不推荐)** 点击“添加菜单”以在菜单树的末尾插入一个空白菜单项。此方法需要对菜单项设置有良好的理解,我们将在下面介绍。起初可能会感到不知所措,因此你可以稍后再探索。

选项 2(推荐): 我们已经为你准备了许多设计良好的菜单项模板。只需将它们复制并粘贴到正确的位置。完成菜单树后,只需删除未使用的模板。

1.5. 重要! “是否为多列菜单项”属性(仅适用于桌面和 Mega 菜单)。

这是一个高度专业化的功能,专门为桌面 Mega 菜单设计。当你需要一个具有多列的全屏菜单项时使用。每列可以配置自定义宽度(例如,3/12、4/12、6/12…)。多列菜单项在构建复杂菜单布局时非常强大和灵活,能够满足你的需求。

如果你不需要像多列菜单项那样复杂的布局——或者计划稍后使用它们——你可以安全地将它们从你的 1 级菜单项中删除。

查看有关如何使用“是否为多列菜单项”属性的详细说明。

当一个 1 级菜单项设置为 “是否为多列菜单项” 时,它将在菜单树中以浅黄色突出显示,其 2 级菜单项将自动转换为 (带有红色图标),无论你分配的其他属性是什么。

对于这些 列 2 级菜单项,唯一可用的属性是 宽度布局。该列下的所有子菜单项将被安排在一个单一的列中。

你觉得这种类型的菜单难以使用吗?你是对的!但是你通过这个属性获得的结果确实让人惊叹。

如果你从 1 级菜单项中移除 “是否为多列菜单” 属性,一切将恢复到原始状态。

为什么你需要 “展开时的下拉宽度” 属性?

默认情况下,当使用 “是否为多列菜单项” 属性时,子菜单(下拉菜单)扩展到全屏宽度(或基于容器大小,通常为 1280、1366、1440 或 100%——可在 高级 选项卡中配置)。然而,使用如此宽的区域时,你可能并不总是有足够的内容或想法来填充空间。

在这种情况下,你可以限制子菜单宽度(每个多列菜单项单独限制),以避免空白或不平衡的外观。

示例: 你可以创建一个宽度为 700px 的菜单,两个列各为 6/12。这样,你仍然可以获得宽敞的布局,而不会浪费太多屏幕空间。