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

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

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

再为组件设置点击事件,

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

相关推荐
AI绘画哇哒哒2 天前
【干货收藏】深度解析AI Agent框架:设计原理+主流选型+项目实操,一站式学习指南
人工智能·学习·ai·程序员·大模型·产品经理·转行
产品经理邹继强3 天前
VTC产品与创新篇④:产品战略全景图——从“造物者”到“生态设计师”
人工智能·产品经理
程序员辣条4 天前
AI产品经理:2024年职场发展的新机遇
人工智能·学习·职场和发展·产品经理·大模型学习·大模型入门·大模型教程
PM老周6 天前
2026年常用瀑布管理工具有哪些?
阿里云·云计算·团队开发·产品经理·个人开发
MYPM_AndyLiu6 天前
对比 Codes、Jira、禅道、PingCode 等工具的需求管理方式
项目管理·产品经理·jira·项目经理·codes·需求管理对比
雁于飞7 天前
【无标题】
笔记·面试·职场和发展·跳槽·产品经理·创业创新·学习方法
SickeyLee9 天前
产品经理案例分析(二):电商产品立项:从 0 到 1 启动前,这 5 件事必须想透
产品经理
才聚PMP10 天前
怎么查PMP培训机构是否有官方资质?
产品经理
rolt11 天前
贷款卖房、西门和金莲《软件方法》第2章
产品经理·需求分析·需求工程
BORN(^-^)11 天前
《产品经理方法论》阅读笔记
笔记·产品经理