Axure 9 实战案例，动态面板的应用 6，导航菜单栏的手风琴效果

Hello！欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>

我们接着再继续学习动态面板的应用，本篇课程我们来讲解一下，如何运用动态面板绘制导航菜单栏的手风琴效果。

在这里插入图片描述

我们还是先来看看完成效果图，大家可以看到，手风琴菜单的交互主要包括：
①点击菜单1~3时，可展开或收起内容区域；
②点击收起菜单1~2时，其余下方菜单均向上移动；
③点击展开菜单1~3时，其余菜单均收起（即手风琴效果）。

在这里插入图片描述

菜单初稿

一如既往，这里提前把菜单初稿准备好了。下面来给大家讲解一下手风琴效果的实现步骤。

首先选中菜单1和它的内容区域，点击右键，选择转换为动态面板；然后在概要中点击State1的重复状态，复制出State2；接着修改State2为收起后的样式（即删除内容区域、垂直翻转箭头图标）；同样为了便于后面添加交互，做好命名工作。

在这里插入图片描述

选中菜单1+内容区域，转换为动态面板

在这里插入图片描述

点击State1的重复状态，复制出State2

在这里插入图片描述

绘制State2（收起）的样式，并做好命名工作

接着用同样的方法绘制菜单2和菜单3，此处就不再啰嗦了。第一步的菜单准备工作（即绘制动态面板）就算完成了。

在这里插入图片描述

第一步效果图

选中菜单1动态面板，在交互栏中点击“单击时→设置为下一个状态”，勾选“向后循环”和“更多选项_推动和拉动元件”。如此，点击菜单1时，就可以收起或展开内容区域了（即循环切换动态面板），并且其余下方菜单均向上移动（即拉动下方元件）。
在这里插入图片描述

选中菜单1，点击“单击时→设置为下一个状态”

在这里插入图片描述

勾选“向后循环”和“推动和拉动元件”

接着将菜单1的交互复制粘贴到菜单2和菜单3上。如此，一个普通（即非手风琴效果）的折叠菜单就完成了。

在这里插入图片描述

第二步的菜单交互（菜单1~3相同）

经过前面两步其实已经能完成一个折叠菜单栏了，第三步主要是实现手风琴的效果。

首先选中菜单1动态面板，在交互栏中点击“单击时_添加动作_设置面板状态“,设置目标为菜单2、STATE为收起、勾选推动和拉动元件；然后点击"设置面板状态"的<添加目标>，选中菜单3，并设置STATE为收起、勾选推动和拉动元件。此处交互的意思是单击菜单1时，收起菜单2和菜单3。

在这里插入图片描述

菜单1中，点击“单击时_添加动作_设置面板状态“

在这里插入图片描述

设置目标为菜单2、STATE为收起、勾选推动和拉动元件

在这里插入图片描述

<添加目标>→选中菜单3，并设置STATE为收起、勾选推动和拉动元件

然后用同样的方法设置菜单2和菜单3的交互；即单击菜单2时，收起菜单1和菜单3；单击菜单3时，收起菜单1和菜单2。

在这里插入图片描述

一至三步所有交互

OK了，通过前面3个步骤，一个手风琴效果的导航菜单就绘制完成了。以上就是本次课程的全部内容，你学会了吗？如果有不理解的地方，可以下载文末的课件继续学习哦。