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

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

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

再为组件设置点击事件,

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

相关推荐
大刘讲IT14 小时前
制造业数字化转型:流程改造先行还是系统固化数据?基于以MTO和MTS的投资回报分析
运维·经验分享·生活·产品经理·数据可视化
向上的车轮6 天前
UI产品经理基础(四):用价值链视角来分析项目需求
产品经理
梓贤Vigo7 天前
【Axure高保真原型】纵向图片轮播
交互·产品经理·axure·原型
结构化知识课堂7 天前
Axure项目实战:智慧城市APP(四)医疗信息(动态面板、选中交互应用)
人工智能·智慧城市·交互·产品经理·axure·动态面板
百事不可口y9 天前
【产品小白】需求分析的进阶
ui·产品运营·产品经理·axure·需求分析·用户运营
风流 少年12 天前
产品经理总结
产品经理
东边有耳15 天前
银行核心账务设计入门必读
后端·架构·产品经理
猴哥聊项目管理18 天前
信创环境下TOP5甘特图工具对比:从功能到适配性测评
项目管理·产品经理·甘特图·团队协作·项目管理软件·国产信创·甘特图工具
梓贤Vigo20 天前
【Axure原型分享】输入框控制环形进度条
交互·产品经理·axure·原型
梓贤Vigo21 天前
【Axure视频教程】中继器表格——控制开关按钮
交互·产品经理·axure·原型·中继器