返回顶部
分享到

Axure高级教程:用中继器做下拉菜单

营销案例 2021-10-03 人浏览 人点赞
摘要

编辑导语:在很多产品中都有下拉菜单的功能,但一些下拉菜单的功能比较笨重,不够灵活;本文作者分享了一个高级教程,用中继器做下拉菜单,我们一起来学习一下。 ...

编辑导语:在很多产品中都有下拉菜单的功能,但一些下拉菜单的功能比较笨重,不够灵活;本文作者分享了一个高级教程,用中继器做下拉菜单,我们一起来学习一下。

今天和大家分享一个中继器的高级教程——用中继器来做下拉菜单。

一、为什么要用中继器做下拉菜单

开始教学之前,我们先来探讨一下为什么要用中继器来做下拉菜单。

首先,市面上的下拉菜单的教程都是用动态面板来做的,通过隐藏的拉动和显示的推动来实现菜单效果的;这样做看是没有问题,但是用起来非常不方便。

为什么呢?

  • 动态面板做的相当于写死了,你有10个菜单,你就要用10个矩形来画10次;
  • 如果想改变菜单的尺寸、颜色等样式,那就需要改10次;
  • 设置菜单跳转交互,需要设置10次,而且还要到不同的动态面板,非常麻烦;这样导致浪费了很多的时间,导致制作出来的元件复用性低。

所以作者就用中继器做了一个下拉菜单原型,只需要填写中继器表格即可自动生成交互,而且修改尺寸尺寸样式也只需要修改一次;非常的方便快捷,做好之后复用性极强,所以强烈推荐给大家使用。

二、原型效果预览

下面是做好的下拉菜单的效果,你们也可以自行体验哈。

原型演示地址:https://lbligu.axshare.com/#g=1

三、制作材料

中继器×1,图片元件×1,右箭头x1,矩形×1,内联框架×1。

中继器内元件如下图摆放,组成一个组合

四、中继器表格设置

picture代表中继器前面的图标,如有需要,右键导入图片即可。

menu1代表该行菜单的一级菜单(一级菜单的menu1和menu2的值是一样的)。

menu2代表二级菜单(本教程以二级菜单为案例,如需要二级以上的可以用同样的思路来制作)。

you代表右箭头,我们如果有下拉菜单,填写1,如果没有为空即可。下面我们会详细介绍该交互。

xianshi代表该菜单是否显示,1代表显示,如果不默认显示则为空,一级菜单必须要为1。

true:是否选中该矩形,我们需要先给矩形选中时一个颜色。

url:代表跳转鼠标单击时跳转的页面,右键导入页面即可。

五、交互设置

1. 中继器每项加载时

设置文本:让矩形文本=item.menu2。

如果右不等于1,我们就隐藏右箭头。

如果图片为空,隐藏图片;否则,设置图片的值为item.picture。

如果显示不等于1,隐藏整个菜单组合。

如果true=1,选中矩形。

2. 鼠标单击菜单组合时

这里需要分两种情况:

第一种情况是you==1,这种代表该菜单有子菜单,所以我们需要将子菜单显示出来。

这里我们需要先将其他子菜单先隐藏,如果菜单少的话可以不做这不操作;不过作者做过的项目基本都是这个逻辑,所以首先要更新行,条件是you不等于1,将这些菜单的item.xian设为0,这样相当于将所有子菜单隐藏。

然后在更新行,和单击菜单同一个menu1的item.xian设为1,这样单击菜单的所有子菜单都会显示出来。

第二种情况就是you不等于1,这是代表没有下级菜单了,所有我们就在内联框架打开url对应的页面即可。

这里为了更加美观,我们会设置该菜单为选中变色;所以用更新行的操作,首先将全部行的true更新为0,再更新该行菜单的true值为0即可。

以上就是本期分享的全部内容,谢谢阅读。

 

本文由 作者: @做产品但不是经理 创作发布或转载,小媒球编辑收集整理发布于媒球圈。其版权均为原作者所有,如稿件涉及版权等问题,请与我们联系删除或处理。稿件内容仅为传递更多信息之目的,不代表本网观点,亦不代表本网站赞同其观点或证实其内容的真实性,更不对您的投资构成建议。,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

推荐阅读
热门点赞
媒球圈-是一个以互联网运营、市场、营销、文案等核心的资讯聚集型学习交流分享平台。媒球圈为您提供公众号运营,用户增长、用户运营、活动运营、数据运营、新媒体运营、微信裂变、文案策划及app运营推广等专业知识,媒球致力于打造一个互联网运营人的学习园地,一起从零到精通,学习中成长。用知识打造你的运营圈子!
  • 官方手机版