使用动态面板简单实现三级菜单

AxureRP8.0教程 小楼一夜听春语 6038℃ 0评论

其实,我挺喜欢三级的。

特别是会动的。

但是,这个东西我一直没怎么深入研究。

不过,今天我又在群里看到有人问这个问题,通过我稍一思索,就有了下面的这篇教程(有装逼嫌疑)。

首先,菜单分为三级。

在之前,我曾经做过抽屉菜单的案例,不过那个是二级的。

既然二级的能做,三级的也不应该很复杂。脱呗!

呃...不是,是往里面再拖元件呗!

这个思路,很简单。

二级菜单,是把二级菜单项都放在一个动态面板中,然后,点击一级菜单时显示这个动态面板,并带有向下推动元件的效果。

三级菜单呢?

在二级菜单所在的动态面板中再放入动态面板?

大家可以自己尝试,这个思路实现不了。

因为,这样的三级菜单展开时没有办法推动下方其它一级菜单和二级菜单的内容。

这特么就尴尬了!

是什么原因造成的呢?

动态面板会把它里面的内容和外部的内容隔开。

打个比方,就好比拍电影里的错位。

看起来是真的,实际上毛都挨不到!

注意,我说的是吻戏!

那么,如何在一个动态面板里面的三级菜单展开时,能够推动动态面板外部的其他元件呢?

我的思路是这样。

在三级菜单展开之前,先把外层动态面板隐藏并拉动元件。

这样,所有二级菜单会变成收起状态。

然后,让三级菜单展开。

这时,外层动态面板自动适应展开后的尺寸(注意外层动态面板要设置自动适应内容尺寸),高度变长。

最后,再把外层动态面板显示出来,这样就会按照展开之后的高度推动下方元件。

不管你有没有看懂这个思路,都不妨碍下面的实现。

你可以看下面的实现步骤时,对照一下上面的思路,将会更容易理解。

第一步,我们先放入菜单的相关元件,这里我使用了一些占位符,大家也可以使用矩形,设置成其他样式。

第二步,我们把三级菜单的三个元件全选,在上面点击鼠标右键,选择【转换为动态面板】的选项;然后,把这个新出现的动态面板命名为“ThreePanel”;并且,再次点击鼠标右键或者在快捷功能区中,把这个动态面板【设为隐藏】。

第三步,我们先来完成三级菜单展开和收起的交互效果。

为二级菜单元件的【鼠标单击时】添加用例,设置动作为【切换可见性】,勾选目标元件“ThreePanel”,并且勾选设置中的【推动/拉动元件】。

完成上面的设置之后,大家可以预览一下效果。

点击二级菜单的时候,就能够点一下显示三级菜单,再点一下隐藏三级菜单。

进进出出的感觉是不是很爽?

第四步,我们把二级菜单和三级菜单全选,同样点击鼠标右键,选择【转换为动态面板】的选项;然后,把这个新出现的动态面板命名为“Submenu”。

注意,如果是拖入的动态面板尺寸是固定的,需要在属性中勾选【自动调整为内容尺寸】的选项。

第五步,双击动态面板“Submenu”,再双击第一个状态“State1”,继续为二级菜单元件的【鼠标单击时】添加动作。

我们先添加【隐藏】外层动态面板“Submenu”的动作,并且勾选【拉动元件】的选项。

注意:在组织动作区域中,新添加的动作会在下方出现,要把它拖动到上方,这样的顺序才不会出现问题。

也就是前面说的,在三级菜单展开之前,我们先收起外层动态面板,并拉动元件。

等三级菜单展开之后,这个时候外层动态面板自动高度变长了,再把它显示出来,并且推动下方元件。

这样,就有了正确的展开效果。

当然,这样处理对收起三级菜单同样有效。

第六步,继续为二级菜单元件的【鼠标单击时】添加第3个动作,也就是上面提到的【显示】外层动态面板“Submenu”,同时,在【更多选项】中选择【推动元件】的选项。

完成上述动作的添加之后,二级菜单元件的交互如下图所示。

第七步,把做好的二级菜单和三级菜单一起选中,根据需求复制几份摆放好。

注意,如下图所示,复制时,不要单独复制二级菜单和三级菜单,必须二级菜单和三级菜单一起复制,这样交互的对应关系才会继续有效。

第八步,为一级菜单添加【鼠标单击时】的用例,设置动作【切换可见性】,勾选动态面板“Submenu”,同时在设置中勾选【推动/拉动元件】。

添加了这个交互之后,点击一级菜单时,就能点一下显示二级菜单,再点一下隐藏二级菜单。

第九步,点击一级菜单的时候,三级菜单默认是收起的状态。

继续为一级菜单元件添加【鼠标单击时】的交互,设置动作【隐藏】所有的三级菜单所在的动态面板“ThreePanel”,并且在隐藏的设置中都要勾选【拉动元件】的选项。

第十步,把以上完成的所有内容全选,根据需求复制几份,并摆放整齐。

同样要注意,复制时,不要单独某个元件,必须所有元件一起复制,这样交互的对应关系才会继续有效。

通过以上步骤,就完成了三级片的制作。

额。。。三级菜单的制作!

源文件下载:http://downloads.iaxure.com/three_level_menu.rp

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 使用动态面板简单实现三级菜单

喜欢 (36)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(16)个小伙伴在吐槽
  1. 沙发!!!!
    Chaos2017-07-11 17:23 回复
  2. 二级菜单点击的时候删了第一步和最后一步只保留中间的也是可以的
    liangllk2017-07-12 11:16 回复
  3. 有点问题,不是很完美
    parker2017-07-24 13:11 回复
    • 小楼一夜听春语
      请说出你的问题
      小楼一夜听春语2017-07-24 14:06 回复
  4. 二级和三级混合的菜单这个就不适用了吧?我试过吧部分三级菜单删掉,在展开已有的三级菜单时,无法正常推动下面的一级菜单
    Sagittar2017-07-24 15:06 回复
    • 小楼一夜听春语
      你的描述真心没看懂,这个案例不就是二三级混合吗?出问题,可能是你删除的时候把交互的关联给弄没了。
      小楼一夜听春语2017-07-24 15:56 回复
      • 网友的意思可能是 一级菜单下有的是2个二级菜单 3个三级菜单 ,但是另外一个一级菜单下是1个二级菜单、1个三级菜单。。不过这种情况我试过了 案例依然成立。
        呢称可以吃吗2017-10-11 17:36 回复
      • 请问您已经展开的三级菜单,点击三级菜单后跳转到功能页面后,菜单扔展开,如何实现?
        mizhe2017-10-18 17:14 回复
        • 小楼一夜听春语
          http://www.iaxure.com/5924.html 参考
          小楼一夜听春语2017-10-18 21:29 回复
          • 谢谢您
            mizhe2017-10-19 09:17
          • 抱歉,那个实现不了
            mizhe2017-10-19 09:25
  5. 看到最后的下载链接 我会心的笑了。。。 小楼老师好爽~甩~蟀~摔....算了那个字输入法打不出来了。。。。不就怪我哈 是输入法打不出“帅”字了
    stl2017-08-10 19:00 回复
  6. 问题:把一级二级三级菜单都展开后,直接点击一级菜单合上,再点击一级菜单,打开的时候中间出现空行。
    张阿实2017-08-15 14:48 回复
  7. 春雨哥,这个还是有点问题,为什么一直点会出现空行
    郭郭郭2017-09-23 15:16 回复
  8. 三级菜单点击跳转到功能页面后,想让菜单不收缩,请问您怎么做?
    mizhe2017-10-18 14:50 回复
  9. 第九步貌似加不加都不影响效果
    mizhe2017-10-18 16:42 回复