mega-menu-builder

Mega Menu Builder

概述

构建一个水平导航栏，展开后显示全宽面板，其中包含分类列、精选商品卡片和促销横幅。大型菜单由可在平台管理后台中管理的内容驱动，支持键盘导航和屏幕阅读器，并能平稳地适配为移动端汉堡菜单抽屉。

何时使用此技能

• 商店拥有 3 个或更多顶级分类，且每个分类都有大量子分类时
• 导航需要在分类链接旁展示促销内容（季节性横幅、精选商品）时
• 作为店面重新设计的一部分重建导航时
• 当前下拉菜单无法让键盘或屏幕阅读器用户无障碍使用时
• 导航内容需要由商品运营人员管理，且无需部署代码时

核心说明

第 1 步：确定商家的平台并选择合适的方法

平台	推荐方法	原因
Shopify	在 Navigation 管理后台配置嵌套菜单 + 使用支持大型菜单的 OS2.0 主题（Impulse、Empire、Prestige），或安装 Meteor Mega Menu 应用	Shopify 的 Navigation 管理后台支持 3 级菜单；Impulse 等高级主题内置大型菜单区块，支持图片和横幅
WooCommerce	使用 Max Mega Menu 插件（免费版/专业版）或搭配现有 WordPress 主题使用 WP Mega Menu	Max Mega Menu 可与任何 WordPress 主题集成，为任何菜单项添加图片小组件和自定义内容，并兼容 Elementor 和 Gutenberg
BigCommerce	在主题编辑器的 Header & Navigation 区域中使用支持大型菜单的主题（Cornerstone Advanced、Merchant）；或安装包含大型菜单区块的 Shogun 页面构建器	BigCommerce 主题对大型菜单的支持各不相同；Cornerstone Advanced 内置大型菜单；Shogun 则可为任何主题添加大型菜单
自定义 / Headless	构建数据驱动的大型菜单组件，支持悬停/聚焦打开逻辑、键盘导航（方向键、Escape）和移动端手风琴抽屉	可全面控制内容模型、动画和无障碍模式；请参阅下方实现

第 2 步：设置导航内容

---

Shopify

配置嵌套导航：

1. 前往 Online Store → Navigation
2. 打开 Main menu（或新建一个）
3. 对于需要大型面板的每个顶级菜单项，点击 Add menu item，并使用缩进控件将子项嵌套在其下
4. Shopify 最多支持 3 级嵌套（顶级 → 分类 → 子分类）
5. 保存菜单

在兼容的主题中启用大型菜单：

如果使用内置大型菜单支持的主题（Impulse、Prestige、Empire）：

1. 前往 Online Store → Themes → Customize
2. 导航至 Header 区域
3. 在 Mega menu settings 下，选择哪些顶级导航项应触发大型面板，哪些应显示简单下拉菜单
4. 对于每个大型面板，使用区块编辑器添加图片区块、精选商品区块和促销横幅区块

使用 Meteor Mega Menu 应用（适用于任何 Shopify 主题）：

1. 从 Shopify App Store 安装
2. 在应用中选择要显示大型面板的菜单项
3. 为每个面板添加链接列、商品卡片（从 Shopify 商品目录中提取）以及图片/横幅区块
4. 该应用会将大型菜单注入主题，无需编辑主题代码

---

WooCommerce

使用 Max Mega Menu（免费版）：

1. 从 WordPress.org 安装 Max Mega Menu
2. 前往 外观 → 菜单，打开主导航菜单
3. 在 Max Mega Menu Settings 面板中为此菜单启用 Max Mega Menu
4. 对于每个需要显示大型菜单面板的顶级菜单项：
   • 点击该菜单项上的 Mega Menu 开关
   • 选择面板布局（例如，3 列）
5. 在每一列中添加菜单项、小工具（图片、HTML、WooCommerce 商品小工具）或文本块
6. 前往 外观 → Max Mega Menu → 外观，将面板宽度设为全宽并配置悬停行为

与 Elementor 集成： 如果商店使用 Elementor，请安装 Happy Addons 或 ElementsKit——两者都包含可在 Elementor 可视化编辑器中使用的拖放式大型菜单构建器。

---

BigCommerce

Cornerstone Advanced 主题：

1. 前往 店面 → 我的主题 → 自定义
2. 在 页眉 部分中找到 导航样式，并将其设为 大型菜单
3. 对于每个顶级分类，可以在 分类设置中添加特色图片和横幅（商品 → 分类 → [分类] → 图片）
4. BigCommerce 会自动使用子分类填充大型菜单面板；主题会以多列布局呈现这些内容

Shogun 页面构建器：

1. 从 BigCommerce App Marketplace 安装 Shogun
2. 使用 Shogun 的 页眉 组件构建自定义大型菜单，可完全拖放控制列、图片和链接
3. 在所有页面中全局发布页眉

---

自定义／无头架构

带悬停／焦点打开逻辑的导航组件：

// MegaNav.jsx
import { useState, useRef } from 'react';

export function MegaNav({ items }) {
  const [activeItem, setActiveItem] = useState(null);
  const closeTimer = useRef(null);

  function openMenu(id) { clearTimeout(closeTimer.current); setActiveItem(id); }
  function scheduleClose() { closeTimer.current = setTimeout(() => setActiveItem(null), 150); }
  function cancelClose() { clearTimeout(closeTimer.current); }

  return (
    <nav aria-label="Main navigation">
      <ul role="menubar" className="nav-bar">
        {items.map(item => (
          <li key={item.id} role="none"
              onMouseEnter={() => item.megaMenu && openMenu(item.id)}
              onMouseLeave={scheduleClose}>
            <a href={item.url} role="menuitem"
               aria-haspopup={item.megaMenu ? 'true' : undefined}
               aria-expanded={activeItem === item.id ? 'true' : undefined}
               onFocus={() => item.megaMenu && openMenu(item.id)}
               onKeyDown={(e) => {
                 if ((e.key === 'ArrowDown' || e.key === 'Enter') && item.megaMenu) {
                   e.preventDefault();
                   openMenu(item.id);
                   document.querySelector(`#panel-${item.id} a`)?.focus();
                 }
                 if (e.key === 'Escape') setActiveItem(null);
               }}>
              {item.label}
            </a>
            {item.megaMenu && activeItem === item.id && (
              <MegaPanel id={`panel-${item.id}`} panel={item.megaMenu}
                onMouseEnter={cancelClose} onMouseLeave={scheduleClose}
                onClose={() => setActiveItem(null)} />
            )}
          </li>
        ))}
      </ul>
    </nav>
  );
}

大型菜单面板布局（列 + 特色商品 + 横幅）：

function MegaPanel({ id, panel, onMouseEnter, onMouseLeave, onClose }) {
  return (
    <div id={id} className="mega-panel" role="region"
         onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
      <div className="mega-panel-inner">
        <div className="mega-columns">
          {panel.columns.map(col => (
            <div key={col.heading} className="mega-column">
              <p className="column-heading">{col.heading}</p>
              <ul>
                {col.links.map(link => (
                  <li key={link.url}><a href={link.url} onClick={onClose}>{link.label}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        {panel.banner && (
          <a href={panel.banner.url} className="mega-banner" onClick={onClose}>
            <img src={panel.banner.image} alt={panel.banner.alt} loading="lazy" />
            <span className="banner-cta">{panel.banner.cta}</span>
          </a>
        )}
      </div>
    </div>
  );
}

.mega-panel {
  position: absolute; top: 100%; left: 0; width: 100vw;
  background: #fff; border-top: 2px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 100;
}
.mega-panel-inner {
  display: grid; grid-template-columns: 1fr 1fr 1fr 200px;
  gap: 2rem; max-width: 1200px; margin: 0 auto; padding: 2rem;
}
@media (max-width: 768px) { .mega-panel { display: none; } }

第 3 步：设置移动端汉堡菜单抽屉

所有平台都需要适合触控操作的移动端导航，以替代桌面端大型菜单：

• Shopify： 现代 OS2.0 主题包含内置的移动端抽屉菜单——在 在线商店 → 主题 → 自定义 → 移动菜单 中进行配置
• WooCommerce： Max Mega Menu 内置移动模式，可将大型菜单转换为手风琴式抽屉；在 外观 → Max Mega Menu → 移动菜单 中进行配置
• BigCommerce： Cornerstone 内置移动导航抽屉；在主题编辑器中配置汉堡按钮的位置
• 自定义： 构建 <dialog> 或 position:fixed 侧边抽屉，并使用手风琴式分类展开方式；打开时对 <body> 应用 overflow:hidden

最佳实践

• 从 CMS／管理后台提供菜单内容——商品管理人员应能自行更新横幅和特色商品，无需工程团队协助
• 设置 150 ms 的关闭延迟——当光标短暂离开导航并移向面板时，可防止面板消失
• 在导航栏上使用 position:absolute 定位面板——不要在单个列表项上定位，这样面板才能横跨整个视口宽度
• 延迟加载面板图片——特色商品和横幅图片不在首屏范围内，因此应使用 loading="lazy"
• 在触控设备上测试——iOS/Android 上不会触发悬停事件；大型菜单应用和插件会处理此问题；对于自定义实现，触控时应点击顶级菜单项来打开

常见问题

问题	解决方案
从导航项斜向移动光标到面板时，面板会关闭	使用 150–200 ms 的 setTimeout 延迟后再关闭；当光标进入面板时取消延迟
键盘用户无法访问面板链接	使用 aria-haspopup 和 aria-expanded；按下 Enter/Space/ArrowDown 时将焦点移入面板
移动端抽屉打开时，后面的页面仍可滚动	抽屉打开时对 <body> 应用 overflow:hidden；关闭时恢复
横幅图片导致布局偏移	为横幅 <img> 元素设置明确的 width 和 height 属性
滚动时导航与粘性内容重叠	在导航上设置 position:sticky; top:0; z-index:50；为大型菜单面板设置 z-index:100

Related Skills

• @responsive-storefront
• @accessibility-commerce
• @product-categorization
• @storefront-theming