axure商城

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

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

其实,我挺喜欢三级的。

特别是会动的。

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

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

首先,菜单分为三级。

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

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

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

这个思路,很简单。

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

三级菜单呢?

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

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

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

这特么就尴尬了!

是什么原因造成的呢?

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

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

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

注意,我说的是吻戏!

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

我的思路是这样。

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

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

然后,让三级菜单展开。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

给TA打赏
共{{data.count}}人
人已打赏
高级教程

Axure中SVG矢量图标的使用方法及资源推荐

2017-6-12 21:33:16

高级教程

Axure实现汉字拼音首字母查询(非JS版)

2018-8-7 8:15:41

axure商城
3 条回复 A文章作者 M管理员
  1. Jonathan

    非常感谢,受益良多!

  2. 筱默

    赞赞赞 谢谢小楼

  3. 157****2499
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索