Axure实现菜单抽屉效果

Axure是怎么实现如下效果的?

  • 菜单打开和收起
  • 侧边栏菜单
  • 抽屉效果

实现效果

两级菜单,点击菜单收起其他菜单,打开当前菜单。

实现原理

  1. 单击一级菜单时,1)切换当下二季菜单的显示/隐藏状态 2)隐藏其他菜单的子菜单
  2. 推/拉动下方原件效果

实现步骤

  1. 在页面上添加一个矩形作为一级菜单

  2. 在一级菜单下面添加多个矩形作为当前一级菜单的二级菜单

  3. 将二级菜单进行组合,设置组合名称为G-sub table,转成动态面板,之后设置为隐藏

  4. 将一个菜单和二级菜单进行组合,多复制几个

  5. 按照倒叙将组合好的菜单叠放,如下:

    注意:第三个菜单放最下面,第二个叠在三的上面,第一个在最上层。

  6. 分别给1、2、3这三个一级菜单添加点击动作(以菜单1为例)

    1)交互->单击时->显示/隐藏->隐藏其他菜单的子级动态面板,设置"拉动原件",选择"下方"

    2)将当前菜单的子菜单的组合设置为"切换"

总的设置如下:

总结

实际上就是堆叠了几个动态面板,适当的时候让其显示或者隐藏,用时拉或者推送下方原件上移或者下移,即可实现此效果。

相关推荐
PM老猫17 天前
最新版谷歌浏览器Axure插件(免翻墙)
axure
梓贤Vigo18 天前
【Axure教程】中继器表格间筛选
交互·产品经理·axure·原型·中继器
Faylynn21 天前
Axure:元件库无法移除元件库(解决按钮是灰色不可点击)
axure
梓贤Vigo21 天前
【Axure高保真原型】休假审批列表
交互·产品经理·axure·原型
招风的黑耳21 天前
商城类电商购物APP网购原型——实战项目原型
app·axure·电商·移动端
Axure组件21 天前
Axure: 多级多选可交互树状列表
交互·axure·ux
私人珍藏库1 个月前
[吾爱原创] 产品原型制作工具 Axure RP 9.0.0.3754 完整汉化版
axure
2501_928094651 个月前
Axure RP 9 Mac 交互原型设计
交互·axure·原型设计
招风的黑耳1 个月前
告别加班!这款Axure移动端元件库,让你原型效率提升300%
axure·移动端·图表·页面设计
Axure组件1 个月前
Axure: 分组柱状图1
交互·axure·ux