用axure rp 6.0版本演示系统菜单栏目折叠交互效果
用axure rp 6.0版本演示系统菜单栏目折叠交互效果
一，母版中设计栏目菜单和导航部分（做系统的产品经理我想都知道用母版来设计页面重复的部分以后需要修改起来比较方便，不用每个页面去修改直接修改母版然后导入即可。）
使用动态面板，画三个菜单栏目的大小区域，然后在动态标签中设置栏目具体名称和子栏目的名称，也可以直接在母版中添加树节点。如下图所示：
2011-5-27 16:39
二，设置标签中的栏目一、栏目二、栏目三和子栏目
对栏目一设置，双击栏目的动态面板，就弹出设置栏目名称框，输入名称：栏目一和子栏目方便后面使用，在动态面板管理器中双击设置的“栏目一”，选择配置动作：选择该栏目下的子栏目即可。对栏目一交互设置如下图：
2011-5-27 16:39
还没有完哦。继续设置栏目一下的子菜单，注意：子菜单需要再加一个动态模板，设置子栏目内容。选择配置动作：选择下一个主栏目（栏目二）。如下图：（这里移动距离设置的140根据菜单长度设置。）
2011-5-27 16:39
设置完展开菜单（动态面板显示时候——onshow）的交互效果，还需要设置一个关闭菜单（动态面板隐藏时候——onhide）的交互效果。选择配置动作：选择下一个主栏目（栏目二）。如下设置子菜单的交互效果：
注意：这里设置距离的时候，用的是负数（-140）
2011-5-27 16:39
三，栏目一的交互折叠效果基本完成了，同理栏目二同样设置。栏目三（最地下一个栏目）不需要设置子栏目的效果。直接设置栏目三的切换可见性动作即可。
这里还没有结束哦。注意：回到母版中，对中间的栏目二设置跟随当前面板移动，否则在折叠的切换的时候，底下的效果不会紧跟着移动。在配置选择中：选择紧跟这个栏目的下一个栏目设置如：设置中间栏目二的时候，配置动作选择栏目三,动作跟随当前面板。
2011-5-27 16:39
这回终于结束了，哈哈。根据自己的按照webppd上的朋友操作，自己来设计了一个菜单栏目的设计步骤，有兴趣的朋友可以留言一起交流学习。徐倩SEO博客 http://www.hongren.org/post/291.html
收藏分享评分
页:
[1]
