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

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

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

再为组件设置点击事件,

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

相关推荐
才聚PMP2 天前
PMP刷题必备:免费刷题小程序推荐!
大数据·产品经理·敏捷流程
产品何同学2 天前
在线问诊医疗APP如何设计?2套原型拆解与AI生成原型图实战
人工智能·产品经理·健康医疗·在线问诊·app原型·ai生成原型图·医疗app
半问3 天前
AI知识库,是捷径吗?
人工智能·ai·互联网·产品经理
产品人卫朋5 天前
卫朋:IPD流程落地 - 为什么要采用产品线模式?
产品经理·创业·ipd流程·华为ipd
梓贤Vigo6 天前
【Axure教程】AI自动对话机器人
交互·产品经理·axure·原型·中继器
实战产品说6 天前
从豆包日报下架,看到的字节战略和市场机会
人工智能·经验分享·学习·产品经理
rolt8 天前
利用AI识别损毁程度是愿景吗《软件方法》第2章
产品经理·需求分析·uml
rolt8 天前
[pdf]《软件方法》全流程引领AI-电子书共435页202601更新
产品经理·ddd·架构师·uml·领域驱动设计
eso198312 天前
AI类产品经理需要掌握的知识域及进阶路径
ai·产品经理
Mintopia15 天前
TrustLink|产品概览(公开版)
人工智能·产品经理·产品