跳到主要内容

顶部菜单：普通菜单和下拉菜单

💡 本篇你将完成：新增普通菜单、下拉菜单，并用 Internal 选择站内页面或产品分类。预计 5 分钟。

AllinCMS 网站后台页面设计器 - 使用 AI 指令把普通菜单替换成下拉分类菜单

先分清楚两种菜单

普通菜单就是顶部一行里的单个入口，例如 Home、About Us、Contact Us。

下拉菜单是一个父菜单下面挂多个子入口，例如在 Products 下面放产品分类。新手第一轮建议只保留 1 个产品下拉菜单，其他重要页面先做普通菜单。

如果默认模板里的菜单不是下拉菜单，不要只改文字。可以在 AI 输入框里输入：

替换一个可以下拉分类的菜单，不要下拉卡片样式的。

让系统先把菜单结构换对，再继续设置链接。

先找到操作入口​

操作路径： AllinCMS 工作台站点列表 → 目标站点 → 进入后台 → 主题 → 当前主题页面 → Home 或目标页面

1进入目标站点后台找到要编辑的网站，点击“进入后台”
AllinCMS 工作台站点列表 - 站点卡片中的进入后台按钮被红框标出
2进入“主题”，点击“页面”在当前启用的主题卡片中点击“页面”
AllinCMS 网站后台主题列表 - 左侧主题入口和启用主题卡片中的页面按钮被红框标出
3找到 Home 或目标页面在当前主题的页面列表中找到 Home 或要修改的页面
AllinCMS 网站后台主题页面列表 - 左侧主题菜单和 Home、产品、文章等目标页面可见

流程总览​

1选中导航菜单
2打开右侧 Props
3普通菜单用 Add menu
4下拉菜单用 Add dropdown item
5链接选择 Internal
6预览手机端

一、选中导航菜单​

进入页面设计器，点击顶部导航区域或菜单模块。选中后，右侧会显示 Props 属性面板。

AllinCMS 网站后台导航菜单 Props 设置 - 在右侧 Props 属性中可以看到 Add dropdown item 和 Add menu 两个添加入口

二、添加普通菜单​

在 Props 属性里找到 + Add menu。

普通菜单适合放最重要、最常用的页面。比如：

Home
About Us
Contact Us
OEM

添加后重点填两项：

字段怎么填
Label菜单显示文字，例如 Contact Us
Target直接选择站内页面

普通页面的正确链接路径：

Target -> Internal -> Page -> 目标页面

AllinCMS 网站后台站内页面链接设置 - 菜单 Target 选择 Internal 和 Page，并在页面下拉框选择 OEM 目标页面

找不到目标页面时，先去建页面

比如下拉框里没有 OEM，说明页面可能还没建好。先看新建页面，建好后再回来选。

三、添加下拉菜单​

在 Props 属性里找到 + Add dropdown item。

下拉菜单适合把同类入口收在一起。最常见的是产品分类：

Products
  - Wireless Earphones
  - Bluetooth Speakers
  - Smart Watches

产品分类的正确链接路径：

Target -> Internal -> Products -> Product Category -> 目标分类

AllinCMS 网站后台产品分类站内链接设置 - Target 选择 Internal、Products 和 Product Category，并在嵌入的放大图中选择已有分类

如果下拉菜单里放的是普通页面，例如 About Us、Contact Us、OEM，仍然按普通页面选择：

Target -> Internal -> Page -> 目标页面
不要把所有分类都堆到顶部

产品分类多时，放进 Products 下拉菜单里。顶部一级菜单尽量控制在 4 到 6 个，客户更容易看懂。

四、推荐菜单结构​

新站第一轮可以先按这个结构做，不要一开始做太复杂：

菜单类型链接怎么选
Home普通菜单Internal -> Page -> Home
Products下拉菜单子项用 Internal -> Products -> Product Category -> 目标分类
About Us普通菜单Internal -> Page -> About Us
Contact Us普通菜单Internal -> Page -> Contact Us
News / Blog可选普通菜单Internal -> Page -> Posts

如果你还没有产品分类，先看产品分类。分类和产品准备好后，再回来改顶部菜单。

五、检查前台效果​

设置完成后，预览或发布页面，检查三件事：

  • 顶部菜单是否显示新增项。
  • 鼠标移动或点击时，下拉菜单是否能展开。
  • 每个菜单点击后是否进入正确页面。
  • 手机端菜单是否能正常展开和点击。
电脑和手机都能点，才算完成

桌面端能展开还不够。切到手机预览，检查菜单是否太挤、是否能点到正确页面。

避坑汇总​

坑后果怎么避
菜单文字填了但没选目标点击没有反应Label 和 Target 都要设置
选择了 Internal 但没选最终页面或分类点击后没跳到目标页一直选到最后一个下拉框
新建了分类，但顶部菜单没更新前台菜单还是旧的回到 Header 菜单手动添加或修改
下拉项太多用户难找只放主要分类，二级分类不要全塞进去
只测电脑端手机端可能不好点手机也点一次

接下来​

📌 跳转链接 —— 如果还要设置按钮、产品、文章链接，再看这篇完整说明。