如何使用动态面板实现三级菜单?制作步骤有哪些?

李冰琪            来源:优草派

动态面板是Axure原型制作中使用非常频繁的一个元件,它主要用于实现动态的交互效果,它由一个或多个状态组成,每个状态就是一个页面,可以通过事件来控制动态面板的状态。那么本文小编来教大家如何实现三级菜单。

如何使用动态面板实现三级菜单?制作步骤有哪些?

1、首先我们需要在菜单中放入相关的元件,大家可以根据需要设置样式。

2、鼠标点击三个菜单进行全选,选择【转换为动态面板】的选项。

3、接着为新的动态面板进行命名。并且,再次点击鼠标右键或者在快捷功能区中,把这个动态面板【设为隐藏】。

4、下一步我们来完成三级菜单展开和收起的交互效果。

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

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

7、鼠标选中二级菜单和三级菜单,选择【转换为动态面板】的选项;然后,把这个新出现的动态面板命名为“Submenu”。

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

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

10、添加【隐藏】外层动态面板“Submenu”的动作,并选择【拉动元件】。

· 为了防止顺序出现问题, 在组织动作区域中,我们需要把新添加的动作从下面拖动到上方。

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

11、继续为二级菜单元件的【鼠标单击时】添加第3个动作,在【更多选项】中选择【推动元件】的选项。

12、鼠标一起选中二级菜单和三级菜单,根据需要进行复制份数。

· 复制时,不要单独复制二级菜单和三级菜单,必须二级菜单和三级菜单一起复制,这样交互的对应关系才会继续有效。

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

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

15、当我们点击一级菜单的时候,三级菜单默认是收起的状态。

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

17、把以上完成的所有内容全选,根据需求复制几份,并摆放整齐。

以上就是关于如何使用动态面板实现三级菜单的操作方法和步骤,我们需要注意在操作的过程中进行复制时,不要单独某个元件,必须所有元件一起复制,这样交互的对应关系才会继续有效。

【原创声明】凡注明“来源:优草派”的文章,系本站原创,任何单位或个人未经本站书面授权不得转载、链接、转贴或以其他方式复制发表。否则,本站将依法追究其法律责任。
TOP 10
  • 周排行
  • 月排行