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

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

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

再为组件设置点击事件,

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

相关推荐
墨兮_moxi1 天前
产品经理产出的原型设计 - 需求文档应该怎么制作?
产品经理·原型设计·需求文档
三桥君2 天前
Prompt:在AI时代,提问比答案更有价值
人工智能·ai·大模型·prompt·产品经理·三桥君
代码江4 天前
【零基础入门产品经理】学习准备篇 | 需要学一些什么呢?
学习·产品经理
云边散步5 天前
产品经理的学习
学习·产品经理
文火冰糖的硅基工坊5 天前
[产品管理-39]:什么是指标、规格、标准?什么是产品指标?什么是产品的设计指标? 什么是产品的技术指标?
产品经理·产品·思维·流程·战略
三桥君6 天前
如何写好提示词Prompt?
人工智能·ai·自然语言处理·大模型·llm·prompt·产品经理
陪学8 天前
大跳水!华为三折叠手机黄牛价暴跌,市场需求显真相
人工智能·华为·智能手机·产品运营·产品经理
DA树聚9 天前
深度学习经典模型之BERT(下)
人工智能·深度学习·自然语言处理·chatgpt·bert·transformer·产品经理
玩转AI大模型9 天前
AI产品经理学习路径:从零基础到精通,从此篇开始!
人工智能·学习·语言模型·自然语言处理·langchain·transformer·产品经理
敏捷开发吖10 天前
安索夫矩阵:70% 的成功企业都在用的增长策略(附模板)
大数据·产品运营·产品经理·需求分析·策略模式·安索夫矩阵