发布幻灯片 — 上下文幻灯片菜单
适用于：上下文幻灯片菜单
幻灯片菜单与粘性菜单是不同的：发布后，菜单不会自动出现在页面上。它仅在通过某个操作触发时打开。这是与粘性菜单的关键区别。
发布流程
步骤 1：将代码嵌入网站
↓
步骤 2：启用“发布此菜单”切换
↓
步骤 3：配置触发器（如何打开菜单）
在步骤 2 之后，菜单已加载到网站上，但处于隐藏状态。步骤 3 决定什么打开它。
步骤 1：嵌入代码
Shopify： 转到 主题编辑器 → 应用嵌入 → 启用Navi+。只需执行一次。
全球： 粘贴到 <head>：
<script>(window._navi_setting ||= []).push({
token: "YOUR_NAVI_TOKEN"
});</script>
<script src="https://live.naviplus.app/start.js" async></script>
步骤 2：启用切换
在发布模态中启用“发布此菜单”切换。
在此步骤之后，菜单尚不会出现在网站上。这是预期的 — 幻灯片菜单需要触发器才能打开。
步骤 3：配置触发器
触发器 UI 分为两个选项卡：移动设置和桌面设置。方法可以自由组合。开发者区域位于选项卡外。
方法 1：从Navi+菜单项打开
在任何菜单项的链接字段中使用语法 open:NaviMenu(embed_id)。embed_id 在模态中显示，可以点击复制：
open:NaviMenu(ABC123)
需要商业计划或更高（需要 2 个以上菜单）。
移动 — 常见用例：
- 一个 Tabbar，首个项目为 “☰ 菜单”，打开幻灯片菜单 — 最常见的设置
- 一个 FAB 和支持菜单，包含一个打开幻灯片菜单的项目
- 一个移动 Mega 菜单，头部下有一个 “☰ 菜单” 项目
桌面 — 常见用例：
- 一个桌面 Mega 菜单，包含一个 “☰ 菜单” 项目 — 保持与移动一致的体验
- 一个桌面 Mega 菜单，包含一个单独的 “☰” 项目，放置在 logo 前面 — 在桌面上镜像移动汉堡图标（需要一些 CSS；联系我们 如果需要帮助）
- 一个 FAB 和支持菜单，包含一个打开幻灯片菜单的项目
- 一个 Tabbar，包含一个 “☰ 菜单” 项目
方法 2：点击元素时打开（CSS 选择器）
输入一个或多个 CSS 选择器，用逗号分隔（,）。
设备特定语法：
| 后缀 | 设备 |
|---|---|
#element |
移动和桌面 |
#element(M) |
仅移动 |
#element(D) |
仅桌面 |
步骤 1 — 找到你的选择器：
在 Shopify（Dawn、Craft、Spotlight…）：
尝试 #Details-menu-drawer-container 用于移动汉堡菜单。对于其他主题，使用 Navi+ 调试模式：访问 yoursite.com/#navidebug-on，悬停在元素上，按 Cmd/Ctrl+C 复制其选择器。
在桌面： 通常没有汉堡图标 — 你需要创建一个可点击的触发器：
- 向现有的 Mega 菜单添加一个 “☰ 菜单” 项目
- 或使用 HTML/CSS 在 logo 前放置一个 ☰ 图标（联系我们 如果需要帮助）
步骤 2 — 优化用户体验： 设置完成后，向替换的元素添加加载指示器，以避免布局闪烁 — 请参见 发布优化。
高级（桌面）：固定侧边栏
幻灯片菜单可以显示为桌面上始终可见的侧边栏，而不是打开/关闭。
如何启用： 转到 高级 → 幻灯片方向 → 选择固定侧边栏选项 → 启用 “在桌面上显示固定菜单”。
无需触发器 — 菜单在桌面上始终可见。
对开发者：JavaScript 函数
从页面代码中的任何位置调用此函数：
naviman.openNaviMenu('EMBED_ID')
适合将幻灯片菜单集成到没有固定选择器的自定义 UI 中。
故障排除
切换已启用但菜单不出现？ → 正确的行为。幻灯片菜单需要触发器（步骤 3）。检查是否配置了至少一种方法。
CSS 选择器无效？
- 使用 Navi+ 调试模式 找到元素的确切选择器。
- 检查该元素是否确实存在于页面上（某些主题在特定断点隐藏/移除元素）。
- 尝试添加
(M)或(D)后缀以按设备分隔。
想在同一页面上使用多个幻灯片菜单？
→ 创建单独的菜单，每个菜单使用不同的 embed_id，使用不同的触发器。