机械外贸网站产品多，菜单很容易越加越长：系列、型号、附件都想放进去，最后手机上展开几屏，客户仍然不知道先点哪里。这篇教你先把菜单整理成一份工作表，再落实到现有主题或编辑器，不从复杂动画开始。
我读取齐鲁机械首页时，看到产品线、系列和附件等入口。这里以它的多产品线结构作为练习背景，讲清每一步怎样做。示例代码不是该站的菜单源码，本教程也没有替它修改线上导航。
第1步：先导出产品清单，别直接拖菜单
在表格里列正式产品类别、系列、型号、附件、目标页面和状态。先标记哪些是客户第一眼就能理解的类别，哪些是需要解释的内部系列名称。
删除重复项前先查引用。两个显示名称相近，可能对应不同范围；同一个目标又可能被多处引用。先搞清关系，才能决定合并名称还是保留不同入口。
这是齐鲁机械公开的装载机产品图。菜单需要帮助买家找到对应类别，而不是靠缩略图让他猜产品组织方式。
| 显示名称 | 层级 | 实际目标 | 用途 | 状态 |
|---|---|---|---|---|
| 填写买家能理解的产品线 | 主分类 | 对应分类页 | 确定产品方向 | 待核对 |
| 填写有明确差异的系列 | 次级 | 系列页或筛选结果 | 缩小比较范围 | 待核对 |
| 填写附件类别 | 关联入口 | 附件列表 | 继续确认工具方向 | 待核对 |
| 查看全部型号 | 补充入口 | 完整列表 | 避免遗漏未推荐产品 | 待核对 |
第2步：让每一层只回答一个问题
第一层回答“找哪类机器”，第二层回答“比较哪个系列或范围”。具体型号是否放进菜单，要看它能否帮助用户更快定位，而不是因为产品页已经建好，就必须全塞进去。
系列名不够直观时，加短说明解释区别，但不要在菜单中复制整段产品介绍。菜单帮助选择方向，正式能力和条件仍由产品页承接。
附件与主机之间可以提供关联入口，但不能让菜单暗示所有附件都适配全部型号。写“浏览附件”与写“本型号兼容附件”，含义不同。
做完检查：找一个不熟悉产品的同事，只给一个产品方向，让他指出会点哪里。如果他反复在两个同级名称之间犹豫，先改分组或名称，再考虑增加图标。
第3步：先核对目标地址，再填进导航
打开工作表中的每个目标页面，确认实际内容、当前状态和用途。不要只把链接复制进菜单，看见能打开就结束；进入无关首页或错误型号，即使返回成功也不算通过。
推荐卡片写具体型号时，按钮应到对应产品，或明确说明会进入系列列表。避免卡片让人以为直达型号，实际又让他重新寻找。
不同底盘或型号的图像可以辅助识别，但链接关系仍按正式产品清单确定。不要根据图片相似就把两个入口绑到同一详情页。
第4步：用现有主题建立导航，不先装更多插件
先确认网站的导航由哪一部分管理：区块主题可能使用导航区块，其他主题可能使用传统菜单或页面构建器。应在实际负责输出菜单的位置修改，不是多个位置都改一遍。
在相应编辑器里按工作表建立层级，保存到草稿或测试环境。先做纯文字可用版本，确认关系，再加产品缩略图和更复杂的面板。布局制作和链接组织是两项工作，分开检查更容易发现问题。
如果你只是想先理解展开逻辑，可以在测试页使用下面的原生 HTML 小例子。占位地址必须替换，不要直接发布。这是练习用折叠列表，不是完整大型导航替代品。
<details>
<summary>产品中心</summary>
<ul>
<li><a href="/replace-excavator-category/">小型挖掘机</a></li>
<li><a href="/replace-tractor-category/">农用拖拉机</a></li>
<li><a href="/replace-loader-category/">滑移装载机</a></li>
</ul>
</details>原生 details 与 summary 的行为见MDN 说明。若使用 WordPress 区块主题，实际配置可以参考导航区块文档，再按当前主题支持范围操作。
第5步：给桌面和手机分别规定操作规则
桌面大面板可以展示多个产品方向，手机应采用清楚的分组与展开状态。不要只把桌面面板等比缩小；触摸也没有可靠的鼠标悬停状态。
如果某项既有分类页，又有展开子菜单的动作，应让两种操作明确可区分。用户点文字可以进入分类，点展开控件可以看子项，是一种可采用的设计，但要与站点整体交互一致。
手机连续展开多个分组时，检查页面是否还能滚到关闭入口。固定头部、底部咨询按钮与菜单面板不能相互遮挡。搜索或全部产品入口，也要有可返回的路径。
第6步：按任务和键盘一起验收
- 从首页找到指定产品分类，并解释自己为什么选这个入口。
- 从分类进入一个系列，再到对应型号，检查名称与目标一致。
- 用鼠标和触摸分别展开、关闭，检查不会停在半开状态。
- 用 Tab 移动焦点，确认可见；用键盘操作展开与链接。
- 在手机上检查长名称、多个展开项和关闭入口。
- 切换到其他页面，再检查菜单是否仍然一致。
你要记录测试者卡在哪一步，而不是只问“菜单好不好看”。若名称看不懂，先改信息组织；若目标错误，改链接；若展开行为异常，再查组件与事件。不要把所有问题都交给美化。
第7步：新增型号以后，谁负责更新
工作表增加负责人、修改时间和复核状态。新增产品时判断它是否需要进入菜单，系列结束销售时检查是否仍有资料或售后用途，不要简单删掉全部旧入口。
如果多个语言版本分别维护菜单，逐个核对目标关系。翻译名称改变，不应改变产品标识；默认语言菜单已更新，也不等于其他语言自动完成。
最终应交付菜单工作表、实际配置、桌面与手机任务记录，以及维护责任。更多应用入口设计见应用到型号的路径；全站改版的页面分工见齐鲁机械复核。先让几条常用路径走得通，再扩大菜单内容。
