メニューアイテムの構造とCSS

このページは1つのメニューアイテムを詳しく説明します — レンダリングされるHTMLと、アイテム専用のCSSボックスを使用してそのアイテムのみをスタイル設定する方法（アイテムを編集 → 高度な設定 → 内部スタイルシート/CSS）。

このボックスは編集中のアイテムのみをスタイル設定し、アイテムを複製するときにCSSはそのアイテムと共に移動します。メニュー全体のCSS については、このメニュー用のカスタムCSSを使用してください — メニュー構造とCSSを参照。

1つのアイテムの構造

すべてのアイテムはdiv.innerを含む単一のliです。.innerの内部には、順序に従って：

<li class="item level-1 …" data-name="Shop">
  <div class="inner inner-level1">
    <span class="arrow"></span>            <!-- サブメニュー矢印（ある場合） -->
    <!-- <span class="cart_count">3</span> --> <!-- カートバッジとカウント（オプション） -->

    <!-- メディア — アイコンまたは画像（アイテムに画像がある場合、アイコンはレンダリングされません） -->
    <span class="icon"><i class="ri-store-2-line"></i></span>
    <!-- または -->
    <div class="image-border">
      <span class="image-box"><span class="image"><img src="…"></span></span>
    </div>

    <!-- テキスト -->
    <div class="info">
      <div class="flexcol">
        <span class="name">Shop</span>
        <div class="description">すべてのカテゴリをブラウズ</div>   <!-- 説明を入力した場合のみ -->
      </div>
    </div>
  </div>
</li>

ターゲットにできるパーツ

1つのアイテムのCSS記述

このボックスは3つの形式を受け付けます（混在可能）。#SF-…を入力することはなく、<style>タグを追加することもありません — Navi+がこのアイテムのみにすべてをスコープします。

1. & — このアイテム（推奨）

&はアイテムの行（li）を意味し、Sassの&と同じです：

& { border: 1px solid #eee; border-radius: 12px; }
&:hover { background: #f8fafc; }

2. 内側セレクタ — アイテム内のパーツ

上記のテーブルのクラス名を使用します：

.name { font-weight: 700; }
.description { font-size: 12px; opacity: .8; }
.icon i { font-size: 22px; color: #2563eb; }
.image img { border-radius: 10px; }

&の後の空白も「アイテム内」を意味するため、& .nameと.nameは同じです。スペースなしの&（&:hover、&.active）は行自体をスタイル設定します。

3. 裸の宣言 — 旧来のショートカット

セレクタなしでプロパティを記述すると、アイテムの行に適用されます：

color: red;
font-weight: 700;

これは以前のメニューが依存しているため機能しますが、&の方が明確です — また、裸の宣言は@media内では使用できません。

レスポンシブデザイン（@mediaを使用）

@mediaはここで機能します。@media内ではセレクタを使用する必要があります（これは標準CSS）ため、アイテム自体に&を使用します：

/* 電話で小さなパディングと説明を非表示にする */
@media (max-width: 768px) {
  & { padding: 8px; }
  .description { display: none; }
  .name { font-size: 13px; }
}

デバイスごとにアイテムを表示または非表示にするには、CSSではなくエディタのモバイルに表示/デスクトップに表示を使用することをお勧めします — Wixでは、ビューポートベースの@mediaが実際の画面と一致しない場合があります；そこではDisplay設定を使用してください。

例

1つのアイテムをピル/バッジに変える：

& { background: #111; color: #fff; border-radius: 999px; padding: 6px 14px; }
.name { color: #fff; }

ホバー時にハイライト：

&:hover { transform: translateY(-2px); transition: transform .15s; }
&:hover .name { color: #2563eb; }

より大きく、色付きのアイコン：

.icon i { font-size: 24px; color: #e11d48; }

丸い画像と微妙なフレーム：

.image img { border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }

モバイルではコンパクト：

& { padding: 12px; }
@media (max-width: 768px) {
  & { padding: 6px; }
  .description { display: none; }
}

知っておくと良いこと

• #SF-…なし、<style>タグなし — Navi+がこのアイテムのみにCSSをスコープします；他のアイテムに影響することはありません。
• CSSはアイテムを複製するときと共に移動します（アイテムごと、再利用可能）。
• プロパティがこことアイテムのビジュアル設定（Media box/Inner box color、border、shadowなど）の両方で設定されている場合、ビジュアル設定が優先されます — インラインで適用されます。CSSが有効になるようにその設定をクリアしてください。
• より大きなエディタには展開アイコン（ボックスの右上）を使用してください；Escまたは完了を押して閉じます。

サポートドキュメント — Navi+