Axure8.0--上下折叠式二级菜单

1.这里以三个一级菜单为例

先做出如下的一级菜单、二级菜单 其中给一级菜单分别命名为rA、rB、rC、

Axure8.0--上下折叠式二级菜单_第1张图片

2.三个一级菜单的子菜单分别转换为动态面板 分别命名为p1、p2、p3、

Axure8.0--上下折叠式二级菜单_第2张图片
Axure8.0--上下折叠式二级菜单_第3张图片

3.处理父菜单的点击事件控制显示隐藏的切换

Axure8.0--上下折叠式二级菜单_第4张图片

4.当子菜单p1隐藏的时候,父菜单rB移动到P1的x轴的左侧y轴的顶部

当子菜单p1显示的时候,父菜单rB移动到P1的x轴的左侧y轴的底部

给P1添加用例

p2的也类似添加

Axure8.0--上下折叠式二级菜单_第5张图片
Axure8.0--上下折叠式二级菜单_第6张图片
Axure8.0--上下折叠式二级菜单_第7张图片

5.设置p1、p2、p3的跟随移动

设置p1移动的时候rB跟着移动

         p2移动的时候rC跟着移动

Axure8.0--上下折叠式二级菜单_第8张图片
p1
Axure8.0--上下折叠式二级菜单_第9张图片
p2
Axure8.0--上下折叠式二级菜单_第10张图片
p3

6.至此完成了二级菜单的联动

展示方式

开始只显示一级菜单,隐藏二级菜单,点击一级菜单展开显示二级菜单的模式

Axure8.0--上下折叠式二级菜单_第11张图片
排序完成
Axure8.0--上下折叠式二级菜单_第12张图片
预览
Axure8.0--上下折叠式二级菜单_第13张图片
展开父菜单A
Axure8.0--上下折叠式二级菜单_第14张图片
展开父菜单AB
Axure8.0--上下折叠式二级菜单_第15张图片
展开父菜单ABC

你可能感兴趣的:(Axure8.0--上下折叠式二级菜单)