axure制作菜单下拉、隐藏、点击选中效果

在高保真原型中,制作导航栏菜单时,需要达到点击下拉按钮,子菜单自动弹出,点击其中一个子菜单项可栏目变为选中状态且跳转到对应的子页面。制作材料可以从antdesign中去下载,以下述网络配置菜单为例。在箭头处添加互动效果,为方便起见,先将路由列表,网关配置,向导配置几个组件选中,命名为网络配置子菜单,如下图所示。

按照上述设置后,可以进行上下伸缩菜单,下面开始添加鼠标悬浮在子菜单上时的效果,以及被选中时展示深色的效果。选中子菜单组件框,在interaction栏目中的style effect中选择mouseover,selected,这里颜色设置为深蓝色

再为组件设置点击事件,

将这个效果复制到每个子菜单里,做到这一步时,虽然能鼠标悬浮高亮,点击选中高亮,但会出现点击多个栏目后会同时高亮的情况,此时需要通过设置selection group的方式,让这几个组件只能同时一个被选中,右击组件---selection group,可以命名为主导航菜单选项组,将后续所有菜单里的组件都加到这个组件里。此时就能达到文章开头时说的效果了,但美中不足的是,打开页面时默认所有子菜单都是展开的,需要通过设置一个动画将其默认收起。点击页面空白处,在OnPageLoad里设置Show Hide的效果,如下图所示。至此大功告成!

相关推荐
领麦微红外3 天前
红外测温传感器 赋能充电桩热安全与运维智能化
运维·安全·产品经理·智能硬件
我命由我123454 天前
访客系统形式(有用户概念、无用户概念)
java·开发语言·前端·javascript·python·产品运营·产品经理
进度猫4 天前
甘特图、看板、里程碑到底怎么选?
项目管理·产品经理·甘特图·项目管理软件
姚瑞南5 天前
【PRD】招投标商机雷达爬虫系统
人工智能·经验分享·笔记·爬虫·产品运营·产品经理
产品阿强6 天前
PM 实战:信息架构乱了产品就乱了——用卡片分类法搭好产品结构
产品经理·信息架构
Tim0077 天前
火星来信:把华晨宇的音乐、舞台和我的现场记忆,装进一个会生长的知识库
产品经理
rolt7 天前
[存档]Alistair Cockburn-2003年11月UMLChina交流会
软件工程·产品经理·uml·敏捷开发·用例·cockburn
产品人卫朋8 天前
MTL如何把市场机会转化为有效销售线索?
人工智能·华为·产品经理·ipd流程·流程架构·mtl流程
wanghao6664558 天前
看 AI 怎样处理三份表格,理解 Harness
产品经理
我是李工啊10 天前
PRD 总和代码对不上?让 AI 从代码生成状态图和权限矩阵
人工智能·产品经理