axure 怎么看距离_Axure教程(中级):侧导航收缩及展开

本文介绍了如何使用Axure创建后台管理界面常见的侧导航,并实现导航项的展开与收缩交互效果。通过动态面板的显隐和推拉,详细讲解了页面布局、组件设置和交互设计,最后提供了预览效果和相关资源。
摘要由CSDN通过智能技术生成

e9ce95281b92ee3cbad42d6e738bb0b5.png

在web端的后台管理平台,我们经常看到这样的侧导航。

d860525dc37d3906505a7a61e2409b56.gif

我们来简单模仿一下交互效果,此教程主要是运用动态面板的显隐和推拉动元件的效果:

一、页面布局

从左侧元件库拉入一个【矩形】作为【模块导航1】,一个【动态面板】作为【二级导航】,宽度设置为一样,如下:

fba06d8b6d10284afda70ce02ee0cab2.png

双击【动态面板01】,编辑【state1】,添加4个【矩形】作为展开的子导航。如下:

8d071cf0ecfb40e663424bdd5ca25bc1.png

为了美观,可以让每个矩形的文字居左,距离左边20像素,选中矩

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值