axure导航栏怎么固定在页面(用Axure实现左侧动态导航栏)

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

axure导航栏怎么固定在页面(用Axure实现左侧动态导航栏)(1)

第一种方法

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

axure导航栏怎么固定在页面(用Axure实现左侧动态导航栏)(2)

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

axure导航栏怎么固定在页面(用Axure实现左侧动态导航栏)(3)

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

axure导航栏怎么固定在页面(用Axure实现左侧动态导航栏)(4)

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

第二种方法

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

axure导航栏怎么固定在页面(用Axure实现左侧动态导航栏)(5)

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

axure导航栏怎么固定在页面(用Axure实现左侧动态导航栏)(6)

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

axure导航栏怎么固定在页面(用Axure实现左侧动态导航栏)(7)

axure导航栏怎么固定在页面(用Axure实现左侧动态导航栏)(8)

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

axure导航栏怎么固定在页面(用Axure实现左侧动态导航栏)(9)

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

axure导航栏怎么固定在页面(用Axure实现左侧动态导航栏)(10)

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

axure导航栏怎么固定在页面(用Axure实现左侧动态导航栏)(11)

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

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

题图来自Unsplash,基于CC0协议

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页