Navi+のインストール
ステップ1 — インストール
Shopify: Shopify App Storeからインストールします。アプリはインストール後に自動的に開きます。
他のプラットフォーム（WordPress、WooCommerce、Wix、Webflow、Squarespace、または任意のウェブサイト）：
- dash.naviplus.appで無料アカウントを作成します。
- ウェブサイトのドメインを追加します。
- 埋め込みスニペットをコピーします — これをステップ2で使用します。
ステップ2 — メニューがどのように展開されるかを理解する
Navi+は、メニューの種類に応じて3つの異なる展開方法を使用します。これを事前に理解することで、セットアップ中の時間を節約できます。
1. フローティングメニュー — Tab Bar & FAB
Tab BarとFABは、ページの上に固定位置で浮かぶスティッキーメニューです。スクロールしても消えません。
画面の上、下、左、または右の端
下にスクロールすると隠れ、上にスクロールすると再表示されます
デフォルトでは隠れており、ユーザーが下にスクロールしたときのみ表示されます — スクリーンスペースを節約します
一般的な使用例: 他のフローティング要素 — WhatsApp、Crisp、Messenger、ライブチャットウィジェット — をNavi+メニューアイテムに統合します。これにより、スクリーンスペースが解放され、複数のフローティングアイコンが重なり合う混乱が解消されます。
2. ポジションメニュー — Mega Menu & Grid Menu
Mega MenuとGrid Menuは、ページの特定の位置に配置する必要があります。これを行う方法はいくつかあります：
Navi+をページ上の任意の要素にポイントします。前に挿入、後に挿入、または完全に置き換えます — これがMega Menuがテーマの既存のナビゲーションを完全に置き換える方法です。
テーマカスタマイザー内のアプリブロックを使用して、レイアウトの任意のセクションにメニューをドロップします — コードは不要です。
メニューが表示される正確な場所にページのHTMLに短いスニペットを直接貼り付けます。
CSSセレクタは、ウェブページ上の任意のポイントを特定する方法です — ブラウザが特定の要素をターゲットにする方法です。Navi+は、メニューを正確にどこに挿入するかを知るためにこれを使用します。自分でCSSを書く必要はありません; Navi+には、セレクタを見つけるためのビジュアルピッカーがあります。
3. トリガーメニュー — Slide Menu
Slide Menuは自動的には表示されません。何かがそれをトリガーするまで隠れています：
ユーザーがページ上の何かをクリックします — 例えば、テーマのハンバーガーアイコン
ページ上の任意の要素 — そのCSSセレクタによって指定されます
クリックするとSlide Menuが開くTab BarまたはFABアイテム
これにより、Slide Menuは柔軟性があり、ページに新しい視覚的要素を追加することなく、既存のナビゲーションを置き換えることができます。
ステップ3 — 最初のメニューを作成する
インストールが完了したら、ダッシュボードに移動して最初のメニューを作成します。→ 最初のメニュー（5分クイックスタート）