Axure实现2、3菜单展开/折叠效果

后台系统的管理菜单级联原型设计,一般后台菜单的级别分为2、3级,也会通过结构布局来化解菜单折叠的问题,但是有些复杂系统还是会需要菜单的展开折叠。下面讲一下Axure实现这一效果的过程

一、准备组件

矩形:一级菜单

矩形:二级菜单

可根据自己的需要进行颜色、大小等区分,将一级菜单和二级菜单排列好。



二、添加交互

1、将所有二级菜单转化为动态面板,命名:二级菜单,并设置为隐藏

2、选中一级菜单,添加点击事件,选中二级菜单动态面板,可见性:切换;勾选推动/拉动元件,如下图:

3、将一级菜单和二级菜单全部选中,复制粘贴,粘贴的个数自己定

效果如下图:

三、三级菜单类似

在以上的基础上编辑,选中一个一级菜单和二级菜单进行编辑

选择二级菜单动态面板,编辑里面的元件,添加三级菜单

重复以上的步骤

1、先将二级菜单和三级菜单进行排列,选中所有三级菜单,转化为动态面板,命名:三级菜单,并设置为隐藏

2、对二级菜单添加点击事件,

隐藏——二级菜单——拉动元件

切换可见性——三级菜单动态面板——可见性:切换——推动/拉动元件

显示——二级菜单——推动元件

3、选中二级菜单和三级菜单,复制、粘贴

效果如下

4、最后返回顶层,一级菜单的层级

选中一级菜单和二级菜单,复制、粘贴,效果如下:

四、完成

可预览查看效果

如有额外精细化的效果,可以自己在相应的元件上添加效果,如下

效果地址:https://ekmfa2.axshare.com

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 基础1:添加元件到画布 在左侧元件库中,选择要使用的元件,按住鼠标左键不放,拖动到画布适合的位置松开。 基础2:添...
    Kince_X阅读 8,087评论 0 7
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,270评论 25 709
  • (——嘿,标题还挺押韵!) 1、普通人为什么要学经济学? 这世界上有一样东西,是人见人爱,人人都想拥有的,那就是金...
    song的此刻时光阅读 3,222评论 0 4
  • 那是个结,一个大结,不知道什么时候可以散,但不会回到过去,过去很美好,美好里有担忧、有伪装、有讨好,唯...
    璟2017阅读 988评论 0 0