实现步骤:
1.先在页面摆放一个灰色矩形,名为“一级菜单”,三个白色矩形,名为“灰色矩形”;
2.选中三个“二级菜单”白色矩形,然后点击右键,选择【转换为动态面板】
3.设置【动态面板】的名字为“二级菜单组合”,并【隐藏】起来
4. 为一级菜单设置选项组名称“menu”;这个设置能够在之后的选中操作时,保证只有一个一级菜单被选中,其它的被取消选中;这是软件的规则,同组名的元件只能有一个为被选中状态;
5.为一级菜单的【鼠标单击时】事件添加交互,选择【切换选中状态】->【当前元件】->选中状态为【toggle】;
6.为一级菜单【选中时】事件添加交互,设置动作为显示二级菜单的动态面板“二级菜单组合”,注意,更多选项中选择【推动元件】;
7.为一级菜单【取消选中时】事件添加交互,设置动作为隐藏二级菜单的动态面板“二级菜单组合”,注意,设置中勾选【拉动元件】;
8.将完成的一、二级菜单复制多份,然后按顺序堆叠,注意,摆放时一级菜单一定要在上一组二级菜单水平或下方
9.完成,点击预览:
原型查看效果地址:https://gw3wxr.axshare.com
原型RP文件下载地址:https://download.youkuaiyun.com/download/qq_27884377/10878374
想了解更多Axure资讯,赶快下方扫码加入【Axure修炼手册】微信公众号吧!!!