用axure rp 6.0版本演示系统菜单栏目折叠交互效果

徐倩 · 发表于 2011-5-27 16:39:54

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

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

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

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

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

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

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

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

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

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

老蔡 · 发表于 2011-5-28 08:55:50

楼主是个厉害的姑娘。

问一下，现在可以有双击的交互动作吗？

老蔡 · 发表于 2011-5-28 09:28:50

学会了，感谢楼主。
以前觉得做这种伸缩栏很麻烦，现在发现没那么难。

henny · 发表于 2011-6-9 19:12:54

怎么让子菜单展开和收起来的时候项目一，二，三标题有变化，比如加个上，下箭头之类的？

henny · 发表于 2011-6-9 19:15:16

我现在正为这个苦恼，想让菜单任何一个展开的时候，其他栏目收起。但似乎很麻烦，需要帮助^_^

ienjoy54 · 发表于 2011-6-10 22:54:41

学习

pooh1217 · 发表于 2011-7-20 16:30:52

认真学习。。。

李菲 · 发表于 2011-8-17 10:11:09

效果不错

吴煜 · 发表于 2011-8-20 14:29:11

学习了！感谢LZ

马玉杰 · 发表于 2011-8-25 08:06:03

5# henny

这个可以实现，将指示按钮放在两个动态面板里，一个设置显示一个设置隐藏，在切换时就可以有效果了。

徐倩 · 发表于 2011-9-29 15:49:10

11# 马玉杰

这个不错，我也学会了。呵呵

黄药师 · 发表于 2012-10-11 18:59:07

5# henny

这个可以实现，将指示按钮放在两个动态面板里，一个设置显示一个设置隐藏，在切换时就可以有效果了。
马玉杰发表于 2011-8-25 08:06

马克就在找这个回头学习一下多谢各位高人

skyflier · 发表于 2013-2-17 23:53:06

回复@马玉杰：
首先，非常感谢您，跟着您的范例研究了下，终于做出来了跟您一样的效果。
可是，发现了两个问题，继续探讨：
一、您有没有觉得我们的子菜单消失地有点突兀呢？所以我给加上了淡入淡出500ms的动画
二、您有没有想过，我们的菜单其实初始状态都是应该闭合的而不是打开的呢？呜呜，我前后八个菜单加八个子菜单啊，全按照您的方式试置好了，也达到效果了，却发现菜单的初始状态不应是打开的，而应是闭合的。:'(一个晚上木吃木喝奋斗到现在，还在单位木有回家啊！就是这样的结果啊！！！！呜呜！！！！

qianlei007_v · 发表于 2013-2-20 17:41:03

学会了，感谢楼主，谢谢！

lianliandot · 发表于 2014-3-24 11:21:40

我也是这样的真的不知道怎么办啊

lianliandot · 发表于 2014-3-24 11:24:12

14# skyflier

想问您，这个问题解决了嘛？我也遇到这个问题很苦苦恼啊

lianliandot · 发表于 2014-3-24 11:29:08

1# 徐倩 楼主怎么把原始状态改为关闭的呢？

小武哥 · 发表于 2014-5-12 16:25:21

被一个折叠的困扰很久，一直没解决，求大神指导

hula020 · 发表于 2015-3-26 14:49:15

1# 徐倩

get the message,tks!

裸奔的产品汪 · 发表于 2016-1-21 17:22:10

14# skyflier

你可以在起始状态的时候把栏目一，二，三设置为隐藏，单击后显示出来，就能达到你想要的效果。