实现效果:
CMS中常见的点击一级菜单,出现二级菜单效果,
如图有2个一级菜单:商户管理,配送管理
![](https://img.haomeiwen.com/i6287138/b31678860778c815.png)
点击一级菜单“商户管理”,二级菜单跟着往下出现,同时一级菜单
“配送管理”也随着往下
![](https://img.haomeiwen.com/i6287138/e58283357a0aa3a8.png)
实现原理
1,点击一级菜单“商户管理”,要让二级菜单这个模块整体出现或隐藏,可以用点击事件加Show/Hide动作里面的Toggle Visibility实现
2,一级菜单“配送管理”需要随着二级菜单整体下移和上移,可以用Toggle Visibility里面的属性Push/Pull Widget实现,设置好Direction(方向),则可以让一级菜单跟着二级菜单实现联动
实现步骤
在Axure中添加“商户管理”点击事件,然后如图
![](https://img.haomeiwen.com/i6287138/a2c54124f927c3f0.png)
步骤1:添加动作Toggle Visibility
步骤2:Animate Show(出现动画),选择slide down,时间设为200ms,
Animate Hide(隐藏动画),选择slide up,时间设为200ms
步骤3:最重要的一步,最下面的Push/Pull Widgets, 一级菜单能不能跟着二级菜单往下动,就看这个设置了,选择Direction(方向) Below(向下)意思是伸缩组件的方向是向下,则可以实现一级菜单“配送管理”可以跟着二级菜单整体联动
网友评论