设计概述 — 继承与覆盖

Navi+使用一个三级样式系统。理解这一点可以让您高效地为菜单设置样式,而无需重复设置。


三个层级

┌─────────────────────────────────────────────────────┐
│  LEVEL 1  (Design → Level 1)                        │
│  适用于所有顶级菜单项                            │
│  这是整个菜单的全局默认值                        │
└───────────────────┬─────────────────────────────────┘
                    │  Level 2-3 如果为空则继承
┌───────────────────▼─────────────────────────────────┐
│  LEVEL 2-3  (Design → Level 2-3)                    │
│  适用于子菜单 / 下拉菜单                          │
│  为空 = 与Level 1相同                            │
└───────────────────┬─────────────────────────────────┘
                    │  每个项目覆盖所有
┌───────────────────▼─────────────────────────────────┐
│  PER-ITEM  (Edit Item → Interface)                  │
│  针对单个项目的每个项目设置                       │
│  完全覆盖Level 1和Level 2-3                       │
└─────────────────────────────────────────────────────┘

继承规则

Level 2-3从Level 1继承所有空字段:

Level 2-3字段 从Level 1继承
文本颜色 文本颜色
字体大小 字体大小
字体粗细 字体粗细
图标颜色 图标颜色
图标大小 图标大小
显示布局 显示布局
对齐 对齐
分隔符颜色 分隔符(全局)

如果您只配置Level 1,子菜单会自动跟随。只有在您希望子菜单与主菜单看起来不同时,才转到Level 2-3。


每个项目覆盖

Edit Item → Interface中应用于特定项目的设置(文本颜色、图标大小、背景等)仅覆盖该项目的Level 1和Level 2-3。其他项目不受影响。

要移除覆盖:在Edit Item中清除字段 — 项目将恢复到Level 1/2-3。


示例

目标: 所有5个项目的文本为白色,除了”Sale”为红色。

  1. Design → Level 1 → 文本颜色 = #FFFFFF
  2. Edit Item → “Sale” → Interface → 文本颜色 = #FF0000

结果:4个项目保持白色,”Sale”变为红色。无需单独编辑每个项目。


移动 | 桌面语法

某些间距字段支持移动和桌面不同的值:

8 16 8 16             →  两个设备相同的值
8 8 8 8 | 12 24 12 24  →  左侧:移动,右侧:桌面

|之前的部分适用于移动;之后的部分适用于桌面(≥768px)。