公開スライド — コンテキストスライドメニュー

適用対象: コンテキストスライドメニュー

スライドメニューはスティッキーとは異なります: 公開後、メニューは自動的に表示されません。アクションによってトリガーされたときのみ開きます。これがスティッキーメニューとの主な違いです。

公開フロー

ステップ 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は2つのタブに分かれています: モバイル設定とデスクトップ設定。方法は自由に組み合わせることができます。開発者向けゾーンはタブの外にあります。

方法 1: Navi+メニュー項目から開く

任意のメニュー項目のリンクフィールドにopen:NaviMenu(embed_id)の構文を使用します。embed_idはモーダルに表示され、クリックしてコピーできます:

open:NaviMenu(ABC123)

ビジネスプラン以上が必要です（2つ以上のメニューが必要）。

モバイル — 一般的な使用例:

「☰ メニュー」のような最初の項目を持つタブバーがスライドメニューを開く — 最も一般的な設定
スライドメニューを開く単一項目のFAB & サポートメニュー
ヘッダーの下に「☰ メニュー」項目を持つモバイルメガメニュー

デスクトップ — 一般的な使用例:

「☰ メニュー」項目を持つデスクトップメガメニュー — モバイルと一貫した体験を維持
ロゴの前に配置された単一の「☰」項目を持つデスクトップメガメニュー — デスクトップでモバイルハンバーガーを反映（CSSが必要; ヘルプが必要な場合はお問い合わせください）
スライドメニューを開く単一項目のFAB & サポートメニュー
「☰ メニュー」項目を持つタブバー

方法 2: 要素をクリックしたときに開く（CSSセレクタ）

1つ以上のCSSセレクタをカンマで区切って入力します（,）。

デバイス固有の構文:

サフィックス	デバイス
`#element`	モバイルとデスクトップの両方
`#element(M)`	モバイルのみ
`#element(D)`	デスクトップのみ

ステップ 1 — セレクタを見つける:

Shopify（Dawn, Craft, Spotlight…）で: モバイルハンバーガーメニューには#Details-menu-drawer-containerを試してください。他のテーマでは、Navi+デバッグモードを使用します: yoursite.com/#navidebug-onにアクセスし、要素にカーソルを合わせ、Cmd/Ctrl+Cを押してセレクタをコピーします。

デスクトップで: 通常、ハンバーガーアイコンはありません — クリック可能なトリガーを作成する必要があります:

既存のメガメニューに「☰ メニュー」項目を追加
または、HTML/CSSを使用してロゴの前に☰アイコンを配置します（ヘルプが必要な場合はお問い合わせください）

ステップ 2 — UXを最適化: 設定後、レイアウトのフラッシュを避けるために置き換えられた要素にローディングインジケーターを追加します — 公開最適化を参照してください。

高度な設定（デスクトップ）：固定サイドバー

開閉の代わりに、スライドメニューはデスクトップで常に表示されるサイドバーとして表示できます。

有効にする方法: 高度な設定 → スライドイン方向 → 固定サイドバーオプションを選択 → 「デスクトップに固定メニューを表示」を有効にします。

トリガーは必要ありません — メニューはデスクトップで常に表示されます。

開発者向け：JavaScript関数

ページコードのどこからでもこの関数を呼び出します:

naviman.openNaviMenu('EMBED_ID')

固定セレクタなしでスライドメニューをカスタムUIに統合するのに適しています。

トラブルシューティング

トグルが有効なのにメニューが表示されない？ → 正常な動作です。スライドメニューにはトリガーが必要です（ステップ3）。少なくとも1つの方法が設定されていることを確認してください。

CSSセレクタが機能しない？

Navi+デバッグモードを使用して、要素の正確なセレクタを見つけます。
要素が実際にページに存在することを確認します（いくつかのテーマは特定のブレークポイントで要素を隠したり削除したりします）。
デバイスごとに分けるために(M)または(D)サフィックスを追加してみてください。

同じページに複数のスライドメニューを持ちたいですか？ → 各メニューに異なるembed_idを持たせ、異なるトリガーを使用して別々のメニューを作成します。

Navi+ Help — Build menus that convert visitors into buyers