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

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

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

再为组件设置点击事件,

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

相关推荐
文火冰糖的硅基工坊2 天前
[创业之路-200]:什么是business(业务)?B2B, B2C, B2G业务, 什么是业务设计?
产品经理·需求分析·产品·创业·战略
文火冰糖的硅基工坊2 天前
[创业之路-198]:华为的成立发展与新中国的建立与发展路径的相似性比较
华为·产品经理·需求分析·产品·创业·战略
陪学4 天前
产品经理如何做运营数据分析?
前端·人工智能·数据分析·互联网·产品经理
文火冰糖的硅基工坊4 天前
[创业之路-199]:《华为战略管理法-DSTE实战体系》- 3 - 价值转移理论与利润区理论
华为·产品经理·需求分析·产品·创业·战略
开发者工具分享5 天前
软件开发中 Bug 为什么不能彻底消除
产品运营·产品经理
文火冰糖的硅基工坊6 天前
[创业之路-196]:华为成功经验的总结与教训简单总结
科技·华为·产品经理·需求分析·创业
文火冰糖的硅基工坊6 天前
[创业之路-197]:华为的发展路径启示
网络·华为·产品经理·需求分析·产品·创业·战略
我码玄黄9 天前
Figma入门-实战列表页
产品经理·figma·设计·原型设计
Jing_jing_X9 天前
心情追忆- SEO优化提升用户发现率
前端·后端·产品经理·个人开发·流量运营
文火冰糖的硅基工坊9 天前
[创业之路-189]:《华为战略管理法-DSTE实战体系》-2- 生存与发展的双重旋律:短期与长期、战术与战略的交响乐章
产品经理·需求分析·产品·创业·战略