Axure正版代理
北京口耳相传科技有限公司旗下网站

Axure原型教程:使用动态面板简单实现三级菜单

很多同学都在问如何实现三级菜单,动手能力强的同学可能已经尝试过了,结果非常令人失望,大都失败了。强大的Axure难道搞不定区区一个三级菜单吗?来看看小楼老师的亲身示范吧,文章末尾有源文件。本文转载自小楼老师博客:http://www.iaxure.com/5811.html

其实,我挺喜欢三级的。

特别是会动的。

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

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

首先,菜单分为三级。

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

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

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

这个思路,很简单。

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

三级菜单呢?

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

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

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

这特么就尴尬了!

是什么原因造成的呢?

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

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

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

注意,我说的是吻戏!

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

我的思路是这样。

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

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

然后,让三级菜单展开。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

评论 16

评论前必须登录!

 

  1. #13

    小楼老师,我是看您的教程入的门,但是这个案例看了好久还是看不懂,不是很明白推动/拉动的含义,还有为啥要先隐藏再显示,而且每一步都要推动/拉动,您的入门教程里好像没有讲解过推动/拉动的用法

    sun873105872天前
  2. #12

    一般我做到二级后不会再往下做且还是设置移动距离好像这样会更简单有空试

    Misaki Rin.4天前
  3. #11

    马克

    Misaki Rin.4天前
  4. #10

    很好

    lml6天前
  5. #9

    不会贴合的原因应该是因为一级菜单中“hide three panel”的操作有关。把这个操作删除,再次点击一级菜单就不会有空隙。
    如果要做多个,好像不能复制黏贴,因为打开二级菜单时,对下面的一级菜单也是会有影响的,所以点击二级菜单还需要写明下面一级菜单的操作。

    Moona2周前 (10-11)
  6. #8

    搞定 总结一下:
    1、三个3级菜单(占位符)设置为动态面板,取名leve3,设置为隐藏;
    2、设置2级菜单(2#矩形)动作:显示/隐藏 leve3;
    3、将leve3和2级菜单一起设置为动态面板,取名leve2,设置为隐藏;
    4、设置1级菜单(1#矩形)动作:显示/隐藏 leve2;
    到这里单个三级菜单操作完成,要做3各三级菜单并列,则需要将1级菜单(1#矩形)在样式选项卡里“管理元件样式”设置为primary button。否则需要将1级此单和leve2 也打包成动态面板。
    注意:设置为隐藏、显示的动作可以省略,貌似没有影响。我的leve2对应“submenu”, leve3对应“three panel”

    Mha3周前 (09-28)
  7. #7

    我的问题是两个而级菜单展开后点击一级菜单隐藏所有后再点击后二级菜单有空隙(三个三级菜单的宽度) 二级菜单展开收起,之间不会贴合

    Mha3周前 (09-28)
  8. #6

    第九步中隐藏三级菜单的action应该放在第一个。否则当展开三级菜单之后点击一级菜单收起再打开,三级菜单的隐藏拉动效果并没有执行。二级菜单之间或出现三级菜单的空隙。

    几分中意1个月前 (09-22)
  9. #5

    第5和第6步submenu不用设置事件也可以的。感觉有点多余了

    FoFa1个月前 (09-21)
  10. #4

    预览的时候收缩和展开时两个一级菜单之间会出现空隙,且随着收缩和展开的次数增加而增大,为什么会有这个现象?

    不游泳的绿豆2个月前 (09-06)
    • step7,复制二级菜单时,是在state1里面复制的,即双击submenu后的界面。

      Mha3周前 (09-28)
      • 这个问题我也出现了。就是复制多个二级菜单之后,然后将二级菜单横向排列可以看出问题。在预览界面,将二级菜单全部展开,然后合起一级菜单,在展开一级菜单,就能看到二级菜单有好几个都没隐藏三级菜单。

        寇义飞1周前 (10-13)
  11. #3

    为什么要复制这么多个呢?

    太阳花花儿的微笑2个月前 (08-31)
  12. #2

    请问 图中漂亮的红色线 和 标注 是用什么软件做的?

    赵国权2个月前 (08-25)
  13. #1

    小黄文

    梦与途2个月前 (08-24)

购买Axure RP正版授权 终身可用

购买专业版购买团队版