メニュー構造とCSS

このメニューのためのカスタムCSS、再利用可能なクラス（CSS）、およびデフォルトのHTMLを使用してメニューをスタイリングするための短いガイド。メニューには3つのレベルがあります：メインバー、サブメニュー、ネストされたサブメニュー。

カスタムCSS — 入力内容

高度な設定 → このメニューのカスタムCSSで、Navi+はプレフィックスを追加します（#SF-…およびメニューのスコープを含む）。通常のセレクタのみを記述してください — #SF-12345678を自分で入力しないでください。

.inner-level1 { padding: 12px 16px; }
ul.children[menulevel="2"] { border-radius: 8px; }

#SF-…を手動で使用するのは、このボックスを使用していないときのみです（たとえば、テーマファイル内のCSS）。

グローバルスタイルシート / CSSは別のフィールドです：これはサイト全体に適用され、1つのメニューにスコープされません — 注意して使用してください。

再利用可能なクラス（CSS）：再利用可能なテーブルで.yourClass { … }を定義し、アイテムにクラスを割り当てます — ルールは同じ内部CSSバンドルに留まります；ボックスに#SF-…を追加する必要はありません。クラスはliに表示されます。

ボックス内でコンテンツを<style>タグでラップしないでください — プレーンCSSのみ。

外部ラッパー

全体のメニューは1つのブロックに収まります：

<div id="SF-…" class="…">
  <ul class="navigation"> … </ul>
</div>

SF-…はメニュー埋め込みIDです（ライブページのDevToolsを参照）。

詳細デモ：1つの3レベルのブランチ（アイコン、画像、名前、説明）

例のラベル：ショップ（レベル1：アイコン + 名前 + 説明）→ 衣類（レベル2：画像 + 名前）→ Tシャツ（レベル3：アイコン + 名前 + 説明）。これは両方のメディアタイプと説明を示します。

各`div.inner`内の順序（ランタイム）

span.arrow — 矢印（サブメニュー / モバイル、メニュータイプによる）。
(オプション) span.cart_count — アイテムがカートバッジを使用している場合のみ。
メディア — 次のいずれか：
- アイコン（Remix Icon / ri-…）： span.icon → i.ri-…
- 画像： div.image-border → span.image-box → span.image → img

注意： アイテムに画像がある場合、アプリは画像を表示し、その行のアイコンはレンダリングされません。

div.info → div.flexcol → span.name（ラベル）→ div.description (エディタで説明を入力した場合のみ)。
(オプション / SEO) アイコンまたは画像はa[href]でラップされる場合があります — span.iconまたはDevToolsの画像ブロックの周りに<a>…</a>が見えることがあります。

完全なHTMLデモ（説明的なクラス / URL）

<div id="SF-8167331678" class="naviItem …">
  <ul class="navigation">

    <li class="item level-1 is-parent-top" linkto="/collections/all" data-name="Shop">
      <!-- レベル1：アイコン + 名前 + 説明 -->
      <div class="inner inner-level1">
        <span class="arrow"></span>
        <!-- <span class="cart_count">3</span>  ← カートバッジのみ -->

        <!-- アイコン：Remix Icon（ri-…） -->
        <span class="icon">
          <i class="ri-store-2-line"></i>
        </span>

        <div class="info">
          <div class="flexcol">
            <span class="name">Shop</span>
            <div class="description">すべてのカテゴリをブラウズ</div>
          </div>
        </div>
      </div>

      <ul class="children" menulevel="2">

        <li class="child level-2 is-parent" linkto="/collections/clothing" data-name="Clothing">
          <!-- レベル2：画像 + 名前（説明なし） -->
          <div class="inner inner-level2">
            <span class="arrow"></span>

            <!-- 画像：設定されている場合、アイコンはレンダリングされません -->
            <div class="image-border">
              <span class="image-box">
                <span class="image">
                  <img
                    src="https://cdn.shopify.com/…/clothing.jpg"
                    alt="Clothing"
                    title="Clothing"
                    loading="lazy"
                    decoding="async">
                </span>
              </span>
            </div>

            <div class="info">
              <div class="flexcol">
                <span class="name">Clothing</span>
                <!-- エディタで説明が空の場合、.descriptionはありません -->
              </div>
            </div>
          </div>

          <ul class="children" menulevel="3">

            <li class="child level-3" linkto="/collections/t-shirts" data-name="T-Shirts">
              <!-- レベル3：アイコン + 名前 + 説明 -->
              <div class="inner inner-level3">
                <span class="arrow"></span>

                <span class="icon">
                  <i class="ri-t-shirt-line"></i>
                </span>

                <div class="info">
                  <div class="flexcol">
                    <span class="name">T-Shirts</span>
                    <div class="description">新しいコレクション</div>
                  </div>
                </div>
              </div>
            </li>

          </ul>
        </li>

      </ul>
    </li>

  </ul>
</div>

メディアスニペット（参考用）

アイコンのみ（画像なし）：

<span class="icon"><i class="ri-home-5-line"></i></span>

画像のみ（アイテムに画像URLが設定されている）：

<div class="image-border">
  <span class="image-box">
    <span class="image">
      <img src="…" alt="…" title="…" loading="lazy" decoding="async">
    </span>
  </span>
</div>

カスタムCSSのセレクター例（Navi+ボックス内 — `#SF-…`を入力しないでください）

/* 矢印 */
.inner-level1 .arrow { }

/* アイコン（任意のレベル） */
.inner-level2 .icon i { font-size: 20px; }

/* 画像 */
.inner-level2 .image img { border-radius: 8px; }

/* タイトルと説明 */
.inner-level1 .name { font-weight: 600; }
.inner-level1 .description { font-size: 12px; opacity: 0.85; }

覚えておいてください： レベル2 / 3のサブメニューは親のliの内部にあり、親のdiv.innerの後に配置されます — ul.navigationの直接の子ではありません。

同じブランチ、テキストダイアグラム：

Shop              ← レベル1（メインバー）
  └─ Clothing     ← レベル2（最初のサブメニュー）
        └─ T-Shirts ← レベル3（ネストされたサブメニュー）

クイックリファレンス（推奨クラス）

レベル	行（`li`）	コンテンツラッパー	次のサブメニュー
1	`level-1`	`.inner-level1`	`ul.children[menulevel="2"]`
2	`level-2`	`.inner-level2`	`ul.children[menulevel="3"]` がある場合
3	`level-3`	`.inner-level3`	—

menulevel="2" / "3"はそのサブメニューパネルのインデックスです — トップレベルアイテムのlevel-1とは異なります。

クイックヒント

.inner-level1、.inner-level2、.inner-level3を使用して1つの深さをターゲットにする代わりに、.innerのみを使用しないでください。
全体のパネル（背景、半径）をスタイル設定する：ul.children[menulevel="2"]または[menulevel="3"]。
テキスト：.info → .flexcol → .name、.description。
アイコン：.iconまたは.icon i — 画像：.image-border、.image img（上記の詳細デモを参照）。
矢印：.arrow（通常は.innerの最初の内部）。

ストアにクラスが不足していますか？

テーマキャッシュをクリアし、メニューを再公開するか、スクリプトバージョンを確認してください。ライブページでクラス名を確認するにはDevToolsを使用してください。

Navi+ Help Center