湖南龙网

  1. 首页 > 生活百科 > >

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

生活百科动态面板

动态面板是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、把以上完成的所有内容全选 ， 根据需求复制几份 ， 并摆放整齐 。
以上就是关于如何使用动态面板实现三级菜单的操作方法和步骤 ， 我们需要注意在操作的过程中进行复制时 ， 不要单独某个元件 ， 必须所有元件一起复制 ， 这样交互的对应关系才会继续有效 。

    推荐阅读


    上一篇：InDesign如何创建等间距的参考线？

    下一篇：如何用Axure快速绘制图标？?如何绘制流程图？