一,说明
在PC端管理后台页面,经常会遇到左侧菜单列表导航,通过左侧的菜单点击打开相应的页面。如果左侧的菜单比较多时,我们就需要对菜单进行分类,实现点击父级菜单,子菜单自动收缩或展开,提升用户体验。
二,效果显示
案例链接:https://f9d9x0.axshare.com/
三、操作步骤
- 在左侧画布区域添加一个菜单栏矩形框;
- 再添加一个商品管理菜单组及商品列表、商品添加、销售统计子菜单;
- 将商品列表、商品添加、销售统计子菜单右键创建动态面板,并设置为隐藏,具体操如下:
- 重复上述操作,添加营销中心菜单组,子菜单分别为促销活动、优惠券、营销统计;
- 给商品管理添加鼠标单击时交互样式,同步添加设置动态面板隐藏/显示动作,设置截图如下:
- 设置目标原件时,选择切换,这样就可以实现,当原件展示时,点击自动隐藏,隐藏时自动显示;
- 展开/收起原件设置为方向向下
- 保持,再次看下预览效果
这里我们主要用到了动态面板的两个交互效果来实现:隐藏/显示切换、展开/收起元件向下