一、概述

本文主要介绍动态面板(Dynamic Panel)的基本用法,通过动态面板快速制作下拉菜单效果。菜单常见的应用场景分为如下两种:

1、按需收缩和展开菜单:每次点击某个一级菜单时,就可以展开此菜单,其它菜单不受影响。不需要时就再点击下收缩,则把菜单收缩起来。

2、每次只有一个菜单展开:每次点击某个一级菜单时,展开此菜单的同时,其他菜单都会自动收缩起来。

二、制作动态面板

选择一个动态面板在画布区,命名为Menu1,主要用来展示如上结束的第一个使用场景。

axure 教程如何制作动态菜单(动态面板之菜单开发)(1)

然后在此动态面板里加三个动态面板,分别命名为Menu1,Menu2,Menu3。分别作为三个独立的一级菜单。再然后分别在三个动态面板中加入两个状态,

1、收缩:作为一级菜单

2、展开:作为二级菜单

axure 教程如何制作动态菜单(动态面板之菜单开发)(2)

二、设置交互事件

然后基于Menu1动态面板添加 OnClick事件,并选择Set Penal State进行动态设置,需注意【需选择Push/Pull Widgets和Below,代表点击一级菜单时,二级菜单会推/拉出来】, 依次类推

分别添加动态面板Menu2和Menu3的交互事件。

axure 教程如何制作动态菜单(动态面板之菜单开发)(3)

三、设置动态面板自适应属性

此设置很重要,设置后动态面板状态里的内容会跟随自动的变化。

axure 教程如何制作动态菜单(动态面板之菜单开发)(4)

四、同理可制作场景二的方式

最终效果为:

axure 教程如何制作动态菜单(动态面板之菜单开发)(5)

请大家多多帮忙转发,关注,我会持续更新,争取开发60套交互使用,让您每天只需学习一套交互,便成为Axure高手,并附带Axure源文件,有任何问题请私信我,多谢大家的支持。

,