Axure原型教程之使用动态面板简单实现三级菜单

　　如何在一个动态面板里面的三级菜单展开时，能够推动动态面板外部的其他元件呢?

　　我的思路是这样。

　　在三级菜单展开之前，先把外层动态面板隐藏并拉动元件。

　　这样，所有二级菜单会变成收起状态。

　　然后，让三级菜单展开。

　　这时，外层动态面板自动适应展开后的尺寸(注意外层动态面板要设置自动适应内容尺寸)，高度变长。

　　*，再把外层动态面板显示出来，这样就会按照展开之后的高度推动下方元件。

　　不管你有没有看懂这个思路，都不妨碍下面的实现。

　　你可以看下面的实现步骤时，对照一下上面的思路，将会更容易理解。

　　*步，我们先放入菜单的相关元件，这里我使用了一些占位符，大家也可以使用矩形，设置成其他样式。

　　第二步，我们把三级菜单的三个元件全选，在上面点击鼠标右键，选择【转换为动态面板】的选项;然后，把这个新出现的动态面板命名为“ThreePanel”;并且，再次点击鼠标右键或者在快捷功能区中，把这个动态面板【设为隐藏】。

　　第三步，我们先来完成三级菜单展开和收起的交互效果。

　　为二级菜单元件的【鼠标单击时】添加用例，设置动作为【切换可见性】，勾选目标元件“ThreePanel”，并且勾选设置中的【推动/拉动元件】。

　　完成上面的设置之后，大家可以预览一下效果。

　　点击二级菜单的时候，就能够点一下显示三级菜单，再点一下隐藏三级菜单。

　　进进出出的感觉是不是很爽?

　　第四步，我们把二级菜单和三级菜单全选，同样点击鼠标右键，选择【转换为动态面板】的选项;然后，把这个新出现的动态面板命名为“Submenu”。

　　注意，如果是拖入的动态面板尺寸是固定的，需要在属性中勾选【自动调整为内容尺寸】的选项。

　　第五步，双击动态面板“Submenu”，再双击*个状态“State1”，继续为二级菜单元件的【鼠标单击时】添加动作。

　　我们先添加【隐藏】外层动态面板“Submenu”的动作，并且勾选【拉动元件】的选项。

　　注意：在组织动作区域中，新添加的动作会在下方出现，要把它拖动到上方，这样的顺序才不会出现问题。

　　也就是前面说的，在三级菜单展开之前，我们先收起外层动态面板，并拉动元件。

　　等三级菜单展开之后，这个时候外层动态面板自动高度变长了，再把它显示出来，并且推动下方元件。

　　这样，就有了正确的展开效果。

　　当然，这样处理对收起三级菜单同样有效。

　　第六步，继续为二级菜单元件的【鼠标单击时】添加第3个动作，也就是上面提到的【显示】外层动态面板“Submenu”，同时，在【更多选项】中选择【推动元件】的选项。

　　完成上述动作的添加之后，二级菜单元件的交互如下图所示。

　　第七步，把做好的二级菜单和三级菜单一起选中，根据需求复制几份摆放好。

　　注意，如下图所示，复制时，不要单独复制二级菜单和三级菜单，必须二级菜单和三级菜单一起复制，这样交互的对应关系才会继续有效。

　　第八步，为一级菜单添加【鼠标单击时】的用例，设置动作【切换可见性】，勾选动态面板“Submenu”，同时在设置中勾选【推动/拉动元件】。

　　添加了这个交互之后，点击一级菜单时，就能点一下显示二级菜单，再点一下隐藏二级菜单。

　　第九步，点击一级菜单的时候，三级菜单默认是收起的状态。

　　继续为一级菜单元件添加【鼠标单击时】的交互，设置动作【隐藏】所有的三级菜单所在的动态面板“ThreePanel”，并且在隐藏的设置中都要勾选【拉动元件】的选项。

　　第十步，把以上完成的所有内容全选，根据需求复制几份，并摆放整齐。

　　同样要注意，复制时，不要单独某个元件，必须所有元件一起复制，这样交互的对应关系才会继续有效。

　　通过以上步骤，就完成了三级菜单的制作。

　　贵阳航洋动漫职业学校是贵阳市教育局批准(贵阳市教[2010]15号)设立的跨专业(包含计算机平面设计、动漫与游戏制作、影像与影视技术、绘画等专业)、多门类、全日制中等专业职业学校，同时也是一所实行准军事化管理的学校。