三级菜单(甚至更多级菜单)在我们的各种产品中出现的频率是比较高的,同样,在问怎么做的小伙伴也特别多。想了一下还是说一下三级菜单的做法吧。
先看看三级菜单的效果:https://8bf5ra.axshare.com/#c=2
说到三级菜单,我们就先来看看二级菜单怎么做。把二级菜单项都放在一个动态面板中,然后,点击一级菜单时显示这个动态面板,并带有向下推动元件的效果。
不能直接来,我们可以利用曲线救国的方法。怎么做?来看
二级菜单的展开和收起可以跟原来的一样做,不同的是三级菜单展开和收起。既然一级菜单只能通过二级菜单的动态面板去推动,那我们就在这里想办法,让二级菜单在三级菜单展开之后再显示,那这个时候就可把一级菜单往下推动了。那在点击一级菜单的时候,二级菜单就已经显示出来了呀?怎么办?就先让它隐藏就可以了。
可能会有点不是太理解,没关系,我们一起来看一下具体的设置方法
先把一二三级菜单做出来。(这里可以先分别只做一个选项:一二三级菜单分别只做一个)二级菜单用动态面板制作,在二级的面板中,在用动态面板制作三级的菜单,注意要进行命名
所有动态面板都要选择“自动调整为内容尺寸”,确保动态面板会随着展开的内容而自动调节它的高度,这样就能够将内容全部展示出来。
部件准备好之后,就开始交互的设置了。在单击“一级菜单”时,显示或隐藏相对应的二级菜单面板,并推动部件。二级菜单的展开和收起就设置好了。
接下来设置三级菜单的展开和收起,在前面说过不能直接设置显示隐藏,要利用二级菜单的显示隐藏来做。这里先把二级菜单隐藏,接着显示三级菜单,最后让二级菜单再一次显示,并且推动其余的部件往下。
PS:如果你是每个元素分别只先制作了一份的话,这时候就将所有的按钮和面板选中之后,直接复制几个副本就可以了,还不用修改用例内容,省事!
这样我们通过动态面板和简单的动作结合使用就实现了三级菜单的制作。当然,这只是一种方法,还会有其他的方法可以做到,如果你有其他的做法,欢迎一起交流。