Axure 9实现左侧动态导航栏

本文介绍了如何使用Axure 9创建基于动态面板的左侧导航栏。通过转换矩形组件为动态面板,设置隐藏及动画效果,实现了一级菜单点击展开二级菜单的功能,并详细说明了动画设置、推拉效果以及鼠标悬停高亮显示的实现步骤。

目前很多B端产品都是基于左侧的导航栏,有研究表明导航栏放在左侧效率更高。那基于Axure怎么能够实现呢,其实只需要动态面板组件就可以搞定。

1.首先,拖入四个矩形组件,如下图所示,第一个矩形取名为一级菜单1。然后将后三个全部选中,右键选择转化为动态面板。取名为二级菜单1。

2.这个动态面板可以预先设置为隐藏。该设置是为了实现在点击一级菜单时才能显示出二级菜单。默认是不展开的效果。

3.接下来设置动画效果,选中一级菜单1组件,右侧选择动作--单击时,显示/隐藏,目标选择二级菜单1,选择切换,同时设置向下滑动。时间的话默认为500毫秒,可以根据自己的需要进行调整。

4.此处注意!一定要点开更多选项,选择这个推拉组件效果,不然后面添加更多个一级菜单的时候,会发现一级菜单不会随着二级菜单的展开而向下推动。

5.设置完成后,点击预览,就能够看到动态下拉的效果。如果需要更多菜单导航,依次类推制作即可。

6.还可以进行一些细节效果的展示,比如针对每个矩形,选择交互样式,选择鼠标悬停。选择填充颜色,选择一个醒目的颜色。这样的话当鼠标停留在某个菜单上面时会自动高亮显示。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值