Axure制作二级菜单--中继器的高阶用法

Axure制作二级菜单栏是产品经理必须掌握的基本技能。当前市面上的教程多半采用动态面板或隐藏组合的方式，动态面板切换太繁琐，而隐藏组合则不容易补增选项。本文介绍一种使用中继器的方式，您只需要制作一次，往后即可多次复用，非常方便的增删选项。

Ps：网上也有朋友发过中继器制作二级菜单栏的教程，但多数没有解决二级菜单数量不一致的情况。本文在此基础上增加了若干判断条件，可以很好的解决这个问题。

先看看效果：

第一阶段 基本素材准备

a、拖拽一个中继器到主操作区

b、双击进入中继器页面编辑细节

将默认的矩形设为一级菜单，复制6个矩形作为二级菜单。一级菜单尺寸设为200 * 40，坐标设为 0,0 ；二级菜单尺寸设为180 * 38，与一级菜单栏右对齐。每级菜单间间距设为10。

c、将二级菜单设置为一个组合，并命名

d、设置一、二级菜单鼠标悬停、选中的变化

选中元件，在属性中设置当鼠标悬停时，元件的颜色、文字等变化

e、设置中继器中每行间距为10

好了，到此第一阶段准备工作完成，你将得到这样的效果：

第二阶段 交互设置

2.1 设置二级菜单的展开

a、将二级菜单组合设置为隐藏

b、由于我们需要一级菜单呈现的结果是：点击一次选中，再点击一次取消选中。

选中一级菜单，添加用例，设置“选中状态为当前元件”，值设为“toggle”；并且设置切换显示/隐藏时，选中二级菜单组合。如下图：

c、设置当鼠标选中二级菜单是，该二级菜单的状态为选中

2.2 设置中继器与数据的关联

中继器中的元件要与表格对应起来才能展示真实数据。

在中继器表格中设置表头。将一级菜单表头设为a，二级菜单表头设为b1、b2、b3、、、b6。

二级菜单数量有多又少，我们只希望加载已有的项目，而不用加载空白项目。即判断某一个二级菜单“值”为空时，隐藏该二级菜单。

具体设置为，增加判断条件。选择该二级菜单对应的变量值，例如[[Item.b1]]。当[[Item.b1]]的值==空 时，隐藏该二级菜单。

必须注意的是，需要选中拉动元件，默认其方向为下方。

将每项二级菜单都这样设置

此后，我们只需要将中继器表格数据展示到对应元件上即可。

添加一个用例，设置各菜单文本的值到对应变量上。

最终加载设置的结果如下

第三阶段 准备数据，验证

准备好相应的数据，验证最终结果。

可以在Excel中将数据编辑好，粘贴到中继器表格中。

结果展示：