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

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

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

再为组件设置点击事件,

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

相关推荐
久菜盒子工作室12 小时前
面试|产品经理|为什么从 xxx(主要是实习 、工作)离职?
面试·职场和发展·产品经理
skylijf1 天前
2026 高项第 6 章 预测考点 + 练习题(共 12 题,做完稳拿分)
笔记·程序人生·其他·职场和发展·软件工程·团队开发·产品经理
久菜盒子工作室2 天前
面试经验|产品经理|自我介绍
面试·职场和发展·产品经理
hqyjzsb2 天前
AI培训课程怎么设计才有效?
人工智能·职场和发展·aigc·产品经理·学习方法·业界资讯·设计语言
Single2 天前
从电工张三的故事所提炼出的一种产品设计模式与技术实现路径
人工智能·经验分享·能源·语音识别·产品经理·空间计算
m0_488913015 天前
万字长文带你梳理Llama开源家族:从Llama-1到Llama-3,看这一篇就够了!
人工智能·学习·机器学习·大模型·产品经理·llama·uml
STRUGGLE_xlf6 天前
产品经理的 Claude Code 免费教程——模块 4:Vibe Coding
产品经理
没有羊的王K6 天前
产品经理——需求篇
产品经理
qiyongwork6 天前
软件项目成本估算新模式探析
人工智能·项目管理·产品经理
结构化知识课堂7 天前
产品经理面试:产品需求分析10题(政策解读、用户心理研究)含答案
面试·职场和发展·产品经理·需求分析·产品思维