Publish Slide — Context スライドメニュー
対象：Context Slide メニュー
スライドメニューは Sticky とは異なります：公開後、メニューはページに自動的に表示されません。アクションによってトリガーされたときのみ開きます。これが Sticky メニューとの主要な違いです。
公開フロー
ステップ 1: 埋め込みコードをウェブサイトに追加
↓
ステップ 2: "Publish this menu" トグルを有効化
↓
ステップ 3: トリガーを設定（メニューを開く方法）
ステップ 2 の後、メニューはウェブサイトに読み込まれますが、非表示状態です。ステップ 3 で何がメニューを開くかを決定します。
ステップ 1：埋め込みコード
Shopify： Theme Editor → App Embeds → Navi+ を有効化。一度のみ行います。
グローバル： <head> に貼り付け：
<script>(window._navi_setting ||= []).push({
token: "YOUR_NAVI_TOKEN"
});</script>
<script src="https://live.naviplus.app/start.js" async></script>
ステップ 2：トグルを有効化
Publish モーダルの “Publish this menu” トグルを有効にします。
このステップの後、メニューはウェブサイトにまだ表示されません。これは期待通りの動作です — スライドメニューは開くためのトリガーが必要です。
ステップ 3：トリガーを設定
スライドメニューを開く 4 つの方法があります：
方法 1：Navi+ メニューアイテムから開く
任意のメニューアイテムのリンクフィールドに open:NaviMenu(embed_id) 構文を使用します。
例：Tabbar に「メニュー」アイテムがある → リンク = open:NaviMenu(ABC123) → そのアイテムをタップするとスライドメニューが開きます。
embed_id はモーダルに表示され、クリックしてコピーできます：
open:NaviMenu(ABC123)
これはもっとも一般的なアプローチ — Tabbar + スライドメニューを組み合わせてナビゲーションスペースを拡張します。
方法 2：ページ上の要素をクリックして開く（CSS Selector）
CSS Selector をカンマ区切りで 1 つ以上入力します。Navi+ は一致する要素のクリック/タップイベントを監視し、スライドメニューを開きます。
デバイス別の構文：
| サフィックス | デバイス |
|---|---|
#element |
モバイルとデスクトップの両方 |
#element(M) |
モバイルのみ |
#element(D) |
デスクトップのみ |
Shopify Dawn テーマの例：
| 目的 | CSS Selector |
|---|---|
| モバイルハンバーガーメニューを置き換え | #Details-menu-drawer-container |
| デバイス別に異なるセレクター | #Details-menu-drawer-container(M), .desktop-menu-btn(D) |
CSS Selector トリガーを設定した後、フラッシュを避けるために元の要素を非表示にすることを検討してください — Publish Optimize を参照。
方法 3：JavaScript 関数を呼び出す
ページコードのどこからでもこの関数を呼び出せます：
naviman.openNaviMenu('EMBED_ID')
固定セレクターなしでスライドメニューをカスタム UI に統合するのに適しています。
方法 4：デスクトップで固定サイドバー
開く/閉じるの代わりに、スライドメニューをデスクトップで永続的な左サイドバーとして固定できます。
有効化方法： Advance タブ → “Fix on left” 方向を選択。
トリガー不要 — メニューはデスクトップで常に表示されます。
トラブルシューティング
トグルを有効にしてもメニューが表示されない？ → 正常な動作です。スライドメニューはトリガーが必要です（ステップ 3）。少なくとも 1 つの方法が設定されているか確認してください。
CSS Selector が機能しない？
- Navi+ Debug Mode を使用して要素の正確なセレクターを見つけます。
- 要素がページに実際に存在するか確認します（一部のテーマは特定のブレークポイントで要素を非表示/削除します）。
(M)または(D)サフィックスを追加してデバイス別に分けることを試みます。
同じページに複数のスライドメニューが必要？
→ 別々のメニューを作成し、それぞれ異なる embed_id と異なるトリガーを使用します。