【Axure原型设计】两种方法实现「侧导航栏一二级菜单伸缩」功能

【侧边导航栏一二级菜单伸缩】是工作中绘制后台管理系统时常用的功能,现将实现过程分享。首先看看效果:

AxShare链接:原型演示

带有伸缩功能的侧边垂直导航栏

接下来和大家详细讲解两种实现方法,个人常用 方法1 ,实用、好拓展复用; 方法2 比较麻烦

方法1: 动态面板+推拉元件

步骤一:拖一个 动态面板 ;命名为“一级菜单A”;勾选面板属性“自动调整为内容尺寸”;设置收起、展开两个面板状态

注意勾选自动调整为内容尺寸
切换面板状态

步骤二:进入 收起 state,拖一个矩形框;设置样式;输入显示文字“我是一级菜单A”;添加交互:鼠标单击时 > 选择设置动态面板状态 > “一级菜单A”,选择状态 Next 向后循环 > 勾选“推动/拉动元件”,方向“下方” > 确定

收起状态交互用例

步骤三:复制“我是一级菜单A”矩形,切换到 展开 state,粘贴;增加几个二级菜单矩形框

展开状态交互用例

完成!多复制几个,排一列,预览看看效果吧!

方法2:显示隐藏+相对位移

步骤一:拖1个一级菜单矩形(A)、3个二级菜单矩形(A1、A2、A3设为隐藏),组合为“一级菜单A”

组合菜单

步骤二:一级菜单矩形A添加交互,点击时切换显示/隐藏二级菜单

切换可见性

步骤三:为任一二级菜单设置 显示 时让其他一级菜单组合整体下移,隐藏 时其他一级菜单组合整体上移;移动 > 相对位移

相对位移

步骤四:(这是比方法1麻烦的点)其他一级菜单也需要按照上述步骤设置相对位移,最后排成一列,预览看看效果吧

你可能感兴趣的:(【Axure原型设计】两种方法实现「侧导航栏一二级菜单伸缩」功能)