最近吧公司几个项目产品原型图都做完了，目前就跟踪UI、前端、技术开发一些琐事，有时间就在逛逛Webppd论坛，看看axure 有那些更多好玩的交互东西可以练练手，刚才又发现一个好玩的东西。特别是在设计系统后台产品的时候用的最多，设计菜单折叠和展开的效果。废话不多说了，先说说具体操作步骤已备有用。

 一，母版中设计栏目菜单和导航部分（做系统的产品经理我想都知道用母版来设计页面重复的部分以后需要修改起来比较方便，不用每个页面去修改直接修改母版然后导入即可。）

使用动态面板，画三个菜单栏目的大小区域，然后在动态标签中设置栏目具体名称和子栏目的名称，也可以直接在母版中添加树节点。如下图所示：

二，设置标签中的栏目一、栏目二、栏目三和子栏目

对栏目一设置，双击栏目的动态面板，就弹出设置栏目名称框，输入名称：栏目一和子栏目方便后面使用，在动态面板管理器中双击设置的“栏目一”，选择配置动作：选择该栏目下的子栏目即可。对栏目一交互设置如下图：

还没有完哦。继续设置栏目一下的子菜单，注意：子菜单需要再加一个动态模板，设置子栏目内容。选择配置动作：选择下一个主栏目（栏目二）。如下图：（这里移动距离设置的140根据菜单长度设置。）

设置完展开菜单（动态面板显示时候——onshow）的交互效果，还需要设置一个关闭菜单（动态面板隐藏时候——onhide）的交互效果。选择配置动作：选择下一个主栏目（栏目二）。如下设置子菜单的交互效果：

注意：这里设置距离的时候，用的是负数（-140）

三，栏目一的交互折叠效果基本完成了，同理栏目二同样设置。栏目三（最地下一个栏目）不需要设置子栏目的效果。直接设置栏目三的切换可见性动作即可。

这里还没有结束哦。注意：回到母版中，对中间的栏目二设置跟随当前面板移动，否则在折叠的切换的时候，底下的效果不会紧跟着移动。在配置选择中：选择紧跟这个栏目的下一个栏目设置如：设置中间栏目二的时候，配置动作选择栏目三,动作跟随当前面板。

这回终于结束了，哈哈。根据自己的按照webppd上的朋友操作，自己来设计了一个菜单栏目的设计步骤，有兴趣的朋友可以留言一起交流学习。徐倩SEO博客 www.hongren.org

下载rp原件包（菜单栏目折叠效果）

axure6动态面板跟随移动.rar