axure 生成html 左侧导航列表不在了,两种简单方法:用Axure实现左侧动态导航栏...

最近在学习Axure的基础教程,在网上看到了很多例子,整理了一下分享给大家~

ddefb8b8d7533002d8ee409151b42a00.png

第一种方法

(1)首先在面板上画几个矩形,大小一样排列好。

d23c694ad15c53759ad3878bf17c40ac.png

(2)把A1、A2、A3设为动态面板,取名p1;同样B1、B2、B3;C1、C2、C3分别取名为p2、p3。

27958aa03ae8bab26b5d4bd6fc912f65.png

(3)给导航栏A设置动作,导航栏对应正确的动态面板。导航栏B导航栏C同理设置好。

7f18d9056d2c2d42c3e97f020381bcf5.png

(4)这样就大功告成了,很简单的一种方法。

第二种方法

(1)第二种方法不同的地方是导航栏会发生变化,同样先画几个矩形。

88848f6971cf5a68ef7d0e8add8c8ef4.png

(2)把导航栏A、A1、A2、A3设为动态面板。注意:不单单是下面的子菜单,是整个一块设为动态面板。导航栏B、C一样转换成动态面板,分别取名p1、p2、p3。

dc6594c23e77c76d78260f17ae13942f.png

(3)双击p1,面板状态管理。把state1改名为展开状态。在点击+号按钮,新添一项,取名为收起状态。p2,p3同理。

4083f251d86872800a9236fc0dc5c820.png

9ce1d9bd7492265fc82ec35d2272c4e1.png

(4)双击打开收起状态,在面板中画一个导航栏A一样的矩形。

3820df02f9adac2772528002d21825c3.png

(5)给动态面板p1设置动作,选择状态那里选择“Next”。

1138ef05edd3bded218768cb9b63190a.png

(6)来看下效果,可以看到导航栏A收起的时候变成收起状态了。

f0cd59f38bbfbdf5652c05707b2fb06b.png

2种方法不同的地方是第一种不改变主菜单的样式,第二种改变样式。产品小白第一次发帖,如有不足的地方还请各位多多指教。

本文由 @七彩螺旋蒲公英 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!赞赏

1人打赏

3cd4cd2ad20f7c1f40cf06db6e457403.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值