axure学习帖-中继器二级菜单

发布于:2023-01-04 ⋅ 阅读:(252) ⋅ 点赞:(0)

之前制作的二级菜单,使用的是动态面板,制作起来比较复杂(可能是因为我方法不得当),最终呈现效果如下所示:

虽然实现了菜单的功能,但是非常不利于后期的维护。后来得知二级菜单可以使用中继器来完成,于是在网上找了一些帖子,但最后都没能学会。最近在逛B站时,学到了一个方法,实践下来之后感觉没什么问题,记录防止以后忘记。

有兴趣的可以去B站搜索up主:芝士教坊

视频链接附上:Axure 9 下拉式菜单的制作2(中继器)_哔哩哔哩_bilibili

接下来记录一下我的制作过程:

首先拖入一个中继器,编辑一下中继器的值,我这里是打算做有三个一级菜单,每个一级菜单下都有两个二级菜单的效果。如下

编辑完之后的展示效果如下:

双击进入中继器,因为我的一级菜单下都有两个二级菜单,所以需要再复制两个矩形框,如下: 

为了方便后续寻找,最好给每个矩形框都命名一下 ,在这里我的命名是和中继器的列名保持一致,采用了second和third:

之后退出中继器内部,为新增的两个矩形添加交互(一级菜单是默认添加的,所以不去管),点击中继器,为他的每项加载时事件添加几个目标:

这样第二个矩形就能取到中继器second列的值 ,第三个矩形同理,交互创建好后效果如下:

 这样看起来不是很明显,只需要调整一下每个矩形的对齐方式和左边距,以及中继器的行间距即可,这里不做赘述,效果如下:

接下来要实现展开/折叠功能

也就是点击一级菜单的时候,展开或者收起对应的二级菜单。进入中继器内部,先将两个二级菜单对应的矩形组合起来并命名(命名是个好习惯,在组件多的时候可以很轻松的找到想要的组件) 

点击一级菜单的矩形,为其创建交互事件,事件选择单击时,元件动作选择显示/隐藏,适用对象选择刚刚的组合,也就是两个二级菜单对应的矩形,因为点击一级菜单既可以展开二级菜单,也可以收起,所以此处选择切换:

这样就实现了展开/折叠的功能。如果将子菜单组合隐藏,那么就默认页面加载时所有菜单都处于折叠状态。

接下来处理二菜单数目不一致的情况

进入中继器内部,选择其中一个二级菜单(我选的是最下面的一个),为其创建载入时事件,动作选择显示/隐藏,对象就是元件本身。要实现的效果是中继器未配置值时,那么该二级菜单就不显示,所以此处选择隐藏:

 之后为这个事件添加判定条件:

原理是当中继器的值为空时触发,所以默认的条件即可:

 接下来试验一下效果,由于我只为最下面的矩形添加了事件,所以将中继器对应的third列的数据删掉一部分:

呈现效果如下:

接下来实现菜单跳转功能

这里我用的是内联框架元件。首先先编辑中继器,为其添加几列,后面引用页面时要用,我这里是1个一级菜单,2个二级菜单,所以我添加3列,分别命名url1,url2,url3(由于我这里的一级菜单下都有二级菜单,所以这里的一级菜单对应的url1可以不添加)。

然后进入中继器内部,为矩形框创建交互事件,这里以第二个矩形框second为例,创建单击事件,动作选择框架中打开链接,元件选择内联框架

 

接下来测试效果,回到中继器,为url2列引入页面:

这样在点击二级菜单1-1、2-1、3-1时,内联框架中就会显示对应的内容:


网站公告

今日签到

点亮在社区的每一天
去签到