axure 侧滑抽屉式菜单_AxureRP教程

前面介绍的《AxureRP教程–自适应菜单效果》里的自适应菜单，其实也可以叫做抽屉式菜单，皆因其可展开可收缩，类似抽屉的开关，不过自适应菜单有空间大小的显示，这里介绍的则没有大小限制，完全取决于菜单项的多少。抽屉式菜单网上也有很多朋友尝试制作过，在这里我自己也尝试了一下，做了一个三级菜单的抽屉式效果。

抽屉式菜单应用的比较广，一般常见于左侧的导航式菜单。本例的实现原理是用一个动态面板来控制一级菜单，这样三级菜单就需要三个动态面板，每个动态面板设置两个状态页，分别为菜单的展开页和收缩页，然后用变量记录前面两级菜单的展开伸缩状态，最后一级菜单因为下面已经没有任何菜单，其展开伸缩不会影响到别的菜单的位置显示。这样就可以根据菜单项导航栏的单击事件来判断当前菜单项的展开伸缩控制，以及下方菜单项之间的移动。

这里不能用前面《AxureRP教程–可关闭菜单效果》里面讲的分组，是因为每个菜单本身带有变化，展开和伸缩的控制不一样，进行分组控制的话，要判断伸缩状态，这样分的组就多了，需要进行排列组合。所以这里还是判断状态比较简单，因为N级菜单只要判断N-1个状态即可，当然菜单级数越多越复杂，有N-1个状态，就需要判断2的N-1次方得次数，因此也是级数增长的。这里我用动态面板的状态页将展开和收缩分成两个页面了，因此原本需要判断四次，这里就是每个页面判断两次，但其实工作量是没有减少的，还是设置了四次。

还有一种设计方式是把二级子菜单单独提取出来用动态面板做，然后控制单击事件为使动态面板隐藏或显示，并移动其下面的菜单，这样也是要判断其隐藏显示状态的，工作量和上面那种方法差不多，可能还稍有增加，因为需要设置的动态面板的数量增加了。

这里做这个抽屉式菜单只是为了演示效果，实际应用的时候需要更改设置，首先这里移动动态面板我是用坐标定位的方式，在实际应用中不会刚好这个菜单的布局在这个位置，所以最好改成位移量的方式，另外就是二级菜单项数目的多少，也会影响移动的距离，届时需要做相应修改。

网上也有朋友做过类似的效果，这里放出来供大家参考，有不同设计方法的可以共同交流。有兴趣的朋友可以将最近三篇介绍菜单效果的优势合起来，比如做一个有缩小，展开，关闭按钮的抽屉式菜单，呵呵，可以尝试一下。