デザインの概要 — 継承とオーバーライド
Navi+は三層スタイルシステムを使用しています。これを理解することで、設定を繰り返すことなくメニューを効率的にスタイリングできます。
三つの層
┌─────────────────────────────────────────────────────┐
│ LEVEL 1 (Design → Level 1) │
│ Applies to all top-level menu items │
│ This is the global default for the entire menu │
└───────────────────┬─────────────────────────────────┘
│ Level 2-3 inherits if empty
┌───────────────────▼─────────────────────────────────┐
│ LEVEL 2-3 (Design → Level 2-3) │
│ Applies to submenus / dropdowns │
│ Empty = same as Level 1 │
└───────────────────┬─────────────────────────────────┘
│ Per-item overrides everything
┌───────────────────▼─────────────────────────────────┐
│ PER-ITEM (Edit Item → Interface) │
│ Per-item settings for individual items │
│ Overrides Level 1 and Level 2-3 completely │
└─────────────────────────────────────────────────────┘
継承ルール
レベル2-3はレベル1から継承します すべての空のフィールドに対して:
| Level 2-3 field | Inherits from Level 1 |
|---|---|
| テキストカラー | テキストカラー |
| フォントサイズ | フォントサイズ |
| フォントウェイト | フォントウェイト |
| アイコンカラー | アイコンカラー |
| アイコンサイズ | アイコンサイズ |
| 表示レイアウト | 表示レイアウト |
| アライン | アライン |
| ディバイダーの色 | ディバイダー (グローバル) |
レベル1だけを設定すると、サブメニューは自動的に従います。サブメニューをメインメニューと異なる見た目にしたい場合のみ、レベル2-3に進んでください。
アイテムごとのオーバーライド
Edit Item → Interfaceで特定のアイテムに適用される設定（テキストカラー、アイコンサイズ、背景など）は、そのアイテムに対してのみレベル1およびレベル2-3をオーバーライドします。他のアイテムには影響しません。
オーバーライドを削除するには: Edit Itemでフィールドをクリアします — アイテムはレベル1/2-3に戻ります。
例
目標: 5つのアイテムはすべて白いテキストで、”Sale”だけが赤です。
- Design → Level 1 → テキストカラー =
#FFFFFF - Edit Item → “Sale” → Interface → テキストカラー =
#FF0000
結果: 4つのアイテムは白のままで、”Sale”は赤になります。各アイテムを個別に編集する必要はありません。
モバイル | デスクトップ構文
一部のスペーシングフィールドは、モバイルとデスクトップで異なる値をサポートします:
8 16 8 16 → same value on both devices
8 8 8 8 | 12 24 12 24 → left: mobile, right: desktop
|の前の部分はモバイルに適用され、後の部分はデスクトップ（≥768px）に適用されます。