Axure RP9教程 推拉效果

一，说明

在PC端管理后台页面，经常会遇到左侧菜单列表导航，通过左侧的菜单点击打开相应的页面。如果左侧的菜单比较多时，我们就需要对菜单进行分类，实现点击父级菜单，子菜单自动收缩或展开，提升用户体验。

二，效果显示

案例链接：https://f9d9x0.axshare.com/

三、操作步骤

1. 在左侧画布区域添加一个菜单栏矩形框；
2. 再添加一个商品管理菜单组及商品列表、商品添加、销售统计子菜单；
3. 将商品列表、商品添加、销售统计子菜单右键创建动态面板，并设置为隐藏，具体操如下：
   
4. 重复上述操作，添加营销中心菜单组，子菜单分别为促销活动、优惠券、营销统计;
5. 给商品管理添加鼠标单击时交互样式，同步添加设置动态面板隐藏/显示动作，设置截图如下：
   

• 设置目标原件时，选择切换，这样就可以实现，当原件展示时，点击自动隐藏，隐藏时自动显示；
• 展开/收起原件设置为方向向下

6. 保持，再次看下预览效果
   

这里我们主要用到了动态面板的两个交互效果来实现：隐藏/显示切换、展开/收起元件向下