Axure实例:二三级菜单展开/折叠效果的实现

AI时代,如何更快入行抢占红利得高薪?前阿里巴巴产品专家带你15天入门AI产品经理。了解一下>

本文介绍了菜单二三级中展开/折叠效果,大家可以参考学习。

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

下面讲一下Axure实现这一效果的过程:

一、准备组件

  • 矩形:一级菜单
  • 矩形:二级菜单

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

二、添加交互

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

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

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

效果如下图:

三、三级菜单类似

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

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

重复以上的步骤:

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

2.对二级菜单添加点击事件。

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

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

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

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

效果如下:

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

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

四、完成

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

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

鉴于很多人有遇到问题,这是源文件可以参考下,链接:https://pan.baidu.com/s/1AqKTz-SHO1TlgmpS4VDFjQ 密码:8yin

 

本文由 @西贝槑 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自PEXELS,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
4人打赏
评论
欢迎留言讨论~!
  1. 求源文件,感谢

    回复
  2. 箭头是如何实现的呢

    回复
  3. 你好,我做好了下拉推动,但二级栏目点击不了,要怎么修改,你发的链接是AXURE 9版,可以发个AXURE 8版吗

    回复
  4. 是版本问题吗,你分享的原型也会出现切换下面的一级菜单往下移,中间出现空格

    回复
    1. 这个和版本没有关系,我看原型显示是正常的

      回复
  5. 您好,谢谢分享。有个问题请教,为什么要先隐藏二级再切换三级?是什么原理?我在二级添加单击交互 切换显示三级不行的原因是什么呀~~?

    回复
    1. 避免中间出现空白处,你可以试试不先隐藏二级试试效果就知道了

      回复
  6. 感谢分享 ;-)

    回复
  7. 展开和收起菜单切换时,怎样设置原件箭头的方向?

    回复
    1. 中心旋转180度就可以

      回复
  8. 照着做可以做出效果,二级菜单的交互用例要先隐藏二级,切换三级,再显示二级的顺序,要不然会错乱。

    回复
  9. 感觉问题应该出在多次复制上。。。

    回复
  10. 单一矩形框不可能同时添加三个有冲突的交互状态,在做三级菜单时,楼主给二级菜单添加了图像热区,这是个很重要的细节,却没有讲出来,难怪很多人照着做却做错了

    回复
    1. 可以加热区也可以不加,热区的主要作用就是把几个元素同时触发同一个事件,省去了每个元素都要添加一遍事件的麻烦

      回复
  11. 您好,我一级菜单展开收起效果都对,就是一级展开的时候二级第一个矩形不知道为什么不见了,但是位置是有的,这个是什么情况?

    回复
    1. 这个我也定位不到啥问题 :arrow: ,,,你看看源件是不是可以找到原因 链接:https://pan.baidu.com/s/1AqKTz-SHO1TlgmpS4VDFjQ 密码:8yin

      回复
  12. 3级菜单第二部是不是写的有问题,实现不了

    回复
    1. 原型分享失效了 :arrow:

      回复
  13. 作者可以再写细致一点吗?按这个步骤推拉效果,位置根本对不齐,能不能分享下原型(Axure原件)。我自己用位置函数做的没问题

    回复
    1. 链接:https://pan.baidu.com/s/1d2FTZBG0kWqgW-2QZTFqfA 密码:76dh 源件地址

      回复
    2. 谢谢分享,我去研究下哪里出问题了。用位置函数做太繁琐了,你这个简便很多

      回复
  14. 您好,为什么点击一级菜单1,下拉的菜单都被盖在一级菜单2下面,一级菜单2始终悬浮在上面,没有被推下去 哎

    回复
    1. 链接:https://pan.baidu.com/s/1d2FTZBG0kWqgW-2QZTFqfA 密码:76dh 源文件地址,可自己检查下

      回复
  15. 请教一下,为什么三级菜单展开时,不能推动下一个一级菜单,而是隐藏在一级菜单后了,完全按您的方法来的

    回复
    1. 链接:https://pan.baidu.com/s/1d2FTZBG0kWqgW-2QZTFqfA 密码:76dh 源文件地址,可自己检查下

      回复
  16. 您好,怎么做精细版的点击选中的效果,类似tab的那个

    回复
    1. 选中组件之后——属性——形状——选中,可以设置选中状态的样式,或者选中组件之后右键——交互样式,都可以编辑

      回复
  17. 你好,不知道为何,我按照您步骤来,二级菜单和三级菜单中间空着一行。

    回复
    1. 可能是放置三级菜单的位置出现了错误,你再检查下

      回复
    2. :grin: 我刚才发现我这个,如果一级二级三级菜单全打开了,然后点击一级菜单。二级菜单会收回去,三级菜单还在页面上显示……

      回复
    3. 应该是动作配置错了,可见性是【切换】,推动和拉动元件,看步骤2

      回复