目前很多B端产品都是基于左侧的导航栏,有研究表明导航栏放在左侧效率更高。那基于Axure怎么能够实现呢,其实只需要动态面板组件就可以搞定。
1.首先,拖入四个矩形组件,如下图所示,第一个矩形取名为一级菜单1。然后将后三个全部选中,右键选择转化为动态面板。取名为二级菜单1。
2.这个动态面板可以预先设置为隐藏。该设置是为了实现在点击一级菜单时才能显示出二级菜单。默认是不展开的效果。
3.接下来设置动画效果,选中一级菜单1组件,右侧选择动作--单击时,显示/隐藏,目标选择二级菜单1,选择切换,同时设置向下滑动。时间的话默认为500毫秒,可以根据自己的需要进行调整。
4.此处注意!一定要点开更多选项,选择这个推拉组件效果,不然后面添加更多个一级菜单的时候,会发现一级菜单不会随着二级菜单的展开而向下推动。
5.设置完成后,点击预览,就能够看到动态下拉的效果。如果需要更多菜单导航,依次类推制作即可。
6.还可以进行一些细节效果的展示,比如针对每个矩形,选择交互样式,选择鼠标悬停。选择填充颜色,选择一个醒目的颜色。这样的话当鼠标停留在某个菜单上面时会自动高亮显示。