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

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

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

再为组件设置点击事件,

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

相关推荐
初雪云19 小时前
iOS 上架入门:证书、描述文件、IPA 上传到底是什么关系?
android·ios·自动化·产品经理·iphone
sunneo1 天前
S16.1第一性原理做产品(1):从《创新者的窘境》看AI颠覆——为什么大模型不是护城河
人工智能·产品运营·产品经理·ai编程·ai-native
鱼疯而行7 天前
第5章 B端与C端的真正分化机制
产品经理·ai编程
zzzzzz31017 天前
当产品经理说这个很简单:我用Python自动化处理奇葩需求的实战指南
python·pycharm·产品经理
UXbot24 天前
帮助企业低门槛开展AI应用开发的平台推荐
前端·低代码·ui·交互·产品经理·原型模式·web app
清辞8531 个月前
产品经理需求推进流程
大数据·深度学习·学习·产品经理
2501_933670791 个月前
大数据管理与应用专业概述
产品经理
迷恋6661 个月前
了解用户是一门学问
经验分享·产品经理
JieDavid1 个月前
专利流程岗上岸实录|奇智创达知识产权系统实操经验分享
大数据·运维·人工智能·经验分享·产品运营·产品经理
项目管理者1 个月前
如何协调多项目任务,解决多项目之间冲突
产品经理·敏捷流程