Axure笔记-aside侧边导航手风琴效果

在网上看了很多教程，用一个“推动元件”的功能即可实现折叠收缩效果。

需要会的知识点：创建动态面板  设置鼠标交互用例

步骤：

1、首先用矩形建立好菜单模块，需要建立3个一级菜单以及对应的子菜单项。

2、把相应的子菜单项，选中后创建动态面板，对其命名p1、p2、p3;主菜单项命名为M1、M2、M3,如下图所示：

元件命名

3、这里要实现的效果是，初始化时，一级菜单1（M1）默认展开，M2和M3收起，所以初始的时候需要把P2和P3设为隐藏。

P2和P3设为隐藏

4、然后按照初始位置，重新排列，把M3和P3看成一个整体，移动到M2的下方（黄色为隐藏部分）

重新排列位置

5、设置菜单的动态效果，实现原理就是鼠标点击主菜单时，显示切换子菜单，为了让它动起来，选择推动元件/拉动元件属性。

1、选中M1，双击<鼠标单击时>

5-1、在用例编辑面板，选择"元件"->"切换可见性"->"切换"；然后勾选"推动/拉动元件"，选择"下方"，动画效果可根据自己需求设定效果和时间。

2、元件-可见性：切换-推动/拉动元件

6、同样的方法，对M2、M3进行设置；点击M2时，切换显示P2;点击M3时，切换显示P3.

对M2设置“鼠标点击时”的用例 对M3“鼠标点击时”的用例

7、经过这三个主菜单的设置，动态效果已经出来了，最终效果如下：