axure中继器实现二级菜单--展开菜单和收缩菜单

实现步骤:

第一步:实现菜单的展开和收缩

1、选择中继器

选择中继器


中继器

2、编辑中继器,选用矩形,第一个矩形,命名为“一级菜单”,下面的矩形分别命名为“二级菜单1”、“二级菜单2”、“二级菜单3”......(名称可以自定,明白意思即可)


一级菜单

3、将二级菜单组合,组合命名为“二级菜单”,组合的“样式”设置为“隐藏”


设置二级菜单

4、选中一级菜单,选择“属性”->“鼠标单击时”->"切换可见性",切换“二级菜单”可见性。


切换二级菜单可见性

至此,可以实现菜单的展开和收缩。

第二步:设置菜单值

1、增加中继器行、列,设置名称为“col0”、“col1”、“col2”......


2、设置一级菜单的值

选择“每项载入时”,设置“col0”的值为一级菜单的值

编辑用例->设置文本->勾选“一级菜单”->设置文本值

设置文本,选择“一级菜单”

编辑文本值->插入函数或变量->选择“Item.col0”

插入变量或函数


一级菜单设置完成

3、设置二级菜单值

与设置一级菜单相同,将“二级菜单1”、“二级菜单2”、“二级菜单3”的值设置为中继器的col1、col2、col3(如果有更多的二级菜单项可以增加)

设置二级菜单值

得到效果


简易菜单

5、根据个人喜好,设置菜单样式

进入编辑中继器,设置中继器的矩形的样式

本例以一级菜单背景色为浅蓝色,二级菜单为白色为例

选中一级菜单矩形,设置填充颜色和边框颜色

选中二级菜单(组合),设置为“无边框”

设置一级菜单


设置二级菜单

效果:

菜单

下一篇:Axure中继器实现二级菜单--隐藏空白菜单项 - 简书

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容