首先，导航分为三级。
在之前，我曾经做过抽屉导航的案例，不过那个是二级的。
既然二级的能做，三级的也不应该很复杂。脱呗!
呃…不是，是往里面再拖元件呗！
这个思路，很简单。
二级导航，是把二级导航项都放在一个动态面板中，然后，点击一级导航时呈现这个动态面板，并带有向下推动元件的效果。
三级导航呢？
在二级导航所在的动态面板中再放入动态面板？
大家可以自己尝试，这个思路实现不了。
因为，这样的三级导航展开时没有办法推动下方其它一级导航和二级导航的内容。
这特么就尴尬了！
是什么原因造成的呢？
动态面板会把它里面的内容和外部的内容隔开。
打个比方，就好比拍电影里的错位。
看起来是真的，实际上毛都挨不到！
注意，我说的是吻戏！
那么，如何在一个动态面板里面的三级导航展开时，能够推动动态面板外部的其他元件呢？
我的思路是这样。
在三级导航展开之前，先把外层动态面板隐藏并拉动元件。
这样，所有二级导航会变成收起状态。
然后，让三级导航展开。
这时，外层动态面板自动适应展开后的尺寸（注意外层动态面板要设置自动适应内容尺寸），高度变长。
最后，再把外层动态面板呈现出来，这样就会按照展开之后的高度推动下方元件。
不管你有没有看懂这个思路，都不妨碍下面的实现。
你可以看下面的实现步骤时，对照一下上面的思路，将会更容易理解。
第一步，我们先放入导航的相关元件，这里我使用了一些占位符，大家也可以使用矩形，设置成其他样式。
第二步，我们把三级导航的三个元件全选，在上面点击鼠标右键，选择【转换为动态面板】的选项；然后，把这个新出现的动态面板命名为“ThreePanel”；并且，再次点击鼠标右键或者在快捷功能区中，把这个动态面板【设为隐藏】。
第三步，我们先来完成三级导航展开和收起的交互效果。
为二级导航元件的【鼠标单击时】添加用例，设置动作为【切换可见性】，勾选目标元件“ThreePanel”，并且勾选设置中的【推动/拉动元件】。
完成上面的设置之后，大家可以预览一下效果。
点击二级导航的时候，就能够点一下呈现三级导航，再点一下隐藏三级导航。
进进出出的感觉是不是很爽？
第四步，我们把二级导航和三级导航全选，同样点击鼠标右键，选择【转换为动态面板】的选项；然后，把这个新出现的动态面板命名为“Submenu”。
在之前，我曾经做过抽屉导航的案例，不过那个是二级的。
既然二级的能做，三级的也不应该很复杂。脱呗!
呃…不是，是往里面再拖元件呗！
这个思路，很简单。
二级导航，是把二级导航项都放在一个动态面板中，然后，点击一级导航时呈现这个动态面板，并带有向下推动元件的效果。
三级导航呢？
在二级导航所在的动态面板中再放入动态面板？
大家可以自己尝试，这个思路实现不了。
因为，这样的三级导航展开时没有办法推动下方其它一级导航和二级导航的内容。
这特么就尴尬了！
是什么原因造成的呢？
动态面板会把它里面的内容和外部的内容隔开。
打个比方，就好比拍电影里的错位。
看起来是真的，实际上毛都挨不到！
注意，我说的是吻戏！
那么，如何在一个动态面板里面的三级导航展开时，能够推动动态面板外部的其他元件呢？
我的思路是这样。
在三级导航展开之前，先把外层动态面板隐藏并拉动元件。
这样，所有二级导航会变成收起状态。
然后，让三级导航展开。
这时，外层动态面板自动适应展开后的尺寸（注意外层动态面板要设置自动适应内容尺寸），高度变长。
最后，再把外层动态面板呈现出来，这样就会按照展开之后的高度推动下方元件。
不管你有没有看懂这个思路，都不妨碍下面的实现。
你可以看下面的实现步骤时，对照一下上面的思路，将会更容易理解。
第一步，我们先放入导航的相关元件，这里我使用了一些占位符，大家也可以使用矩形，设置成其他样式。
第二步，我们把三级导航的三个元件全选，在上面点击鼠标右键，选择【转换为动态面板】的选项；然后，把这个新出现的动态面板命名为“ThreePanel”；并且，再次点击鼠标右键或者在快捷功能区中，把这个动态面板【设为隐藏】。
第三步，我们先来完成三级导航展开和收起的交互效果。
为二级导航元件的【鼠标单击时】添加用例，设置动作为【切换可见性】，勾选目标元件“ThreePanel”，并且勾选设置中的【推动/拉动元件】。
完成上面的设置之后，大家可以预览一下效果。
点击二级导航的时候，就能够点一下呈现三级导航，再点一下隐藏三级导航。
进进出出的感觉是不是很爽？
第四步，我们把二级导航和三级导航全选，同样点击鼠标右键，选择【转换为动态面板】的选项；然后，把这个新出现的动态面板命名为“Submenu”。