Question

Axure怎么制作菜单动态伸缩效果？

Answer 1

菜单缩放在产品中是一个非常常见的功能，如何通过内联框架实现菜单的动态缩放?本文将在AXURE中向大家进行演示，所以有兴趣的小伙伴就可以操作起来~备注：为准备学习Axure、正在学习Axure的小伙伴提供了专业系统的Axure自学视频课，视频教学，知识点清晰，方便快速地掌握~

Axure制作菜单动态伸缩效果步骤：

一、制作原型拉入四个矩形框型，作为一组主菜单与子菜单，画出两组菜单。

主菜单命名为菜单一，下面三个子菜单分别命名为子菜单一，子菜单二，子菜单三。子菜单左侧对齐并垂直分布，子菜单组与主菜单居中分布，子菜单合并成组命名为菜单一子菜单；同样的方式画出菜单二，将其子菜单合并成组命名为菜单二子菜单。

将子菜单和主菜单合并成组；各个菜单组对齐处理。对菜单进行样式设计，我这里把主菜单设为蓝色填充，白色字体。

对子菜单进行样式设计，选中子菜单，右击，选择交互样式，鼠标悬停，鼠标按下，选中的时候子菜单填充浅蓝色。

将子菜单组设置为隐藏。主菜单按照展示的样式进行排列。

接下来从元件中拖拽内联框架，拖到合适大小，并将边框进行隐藏。

二、添加交互点击主菜单一，添加交互，新建交互，选择（ClickorTap），显示与隐藏，目标选中子菜单组合，显示动画，向下滑动500ms，隐藏动画，向上滑动500ms，更多选项，选择推动和拉动原件，下方，线性500ms。

子菜单1设置交互，新建交互，选择（ClickorTap），框架中打开链接，目标选择内联框架，链接到子菜单1对应的详细原型页面。

按照同样的方式设置其他的子菜单。（子菜单链接的具体页面根据业务需要来，可以提前画几个菜单页面）。

按照同样的方式设计其他菜单和相应的界面。最后形成的结果如图。

以上即是关于“Axure怎么制作菜单动态伸缩效果？”的分享内容了，希望能够帮助到你~！更多Axure原型技巧，尽在Axure相关文章！很多小伙伴学习Axure都选择了在网上学习，但是很多都是东拼西凑的学，以致于学习到和实际操作的可能就有所出入了~所以学习Axure，还是系统化比较好！选择的Axure自学视频课，相信能够给予你知识的收获以及动手实操的经验~