axure怎么设计菜单横向隐藏与显示的效果?

所属分类: 软件教程 / 图形图像 阅读数: 1174
收藏 0 赞 0 分享

最近有若干个伙伴找我咨询axure的用法,让我这颗凉了许久的心又再次感受到一点温度,也忽然意识到,凡事坚持不懈的做下去,总会有收获的,所以,本人近期将持续更新一些常用的小技巧,以便广大还在摸索axure的朋友使用。本次将以讲解如何做出满意的隐藏菜单横向隐藏与显示的效果。

1、在做菜单动态效果之前,诸位应该首先需要知道,我们需要什么组件,以最简单的样式来说,首先我们需要一个菜单的动态面板,一个菜单的显示按钮,一个菜单的隐藏按钮,若需要,还可增加一个菜单的具体页面。

2、菜单与图片的显示,要按照自己的要求来设定,比如若想要进入页面后,页面的菜单是显示状态的,则菜单与菜单隐藏按钮直接显示出来,菜单的显示按钮隐藏掉即可,反之,则要隐藏掉菜单与菜单隐藏按钮,直接显示出菜单显示按钮,此外将菜单的显示/隐藏按钮做成动态面板,通过点击来回切换,也是可行的。

3、设置好需要隐藏的菜单后,将隐藏与显示按钮位置重合覆盖掉后平移至需要的位置,比如x轴为0的位置后即可,此时需要开始添加动态事件

4、动态效果需要对两个按钮分别添加,对隐藏按钮来说,需要添加点击后,可将菜单隐藏掉,可将自己隐藏掉,同事还可显示出菜单显示按钮的动态事件;对显示按钮来说,效果基本都是反向的,具体如图所示

5、最终效果如下,可通过点击实现菜单向左隐藏,向右显示的效果。

6、菜单显示隐藏的效果需要视情况而定,比如网页版,像360导航首页,右侧本身有留白区域,菜单的隐藏显示基本与主页面无关,但本人经历过的OA、CRM等办公系统,在设计菜单隐藏显示效果时一般都会要求页面内容与菜单隐藏显示效果一起移动,这点应该在对应的系统设计中,按要求实现。

相关推荐:

axure动态面板怎么设置显示与隐藏?

Axure RP中的网页元件怎么显示与隐藏?

axure怎么设计鼠标移入移出显示或隐藏面板?

更多精彩内容其他人还在看

C4D怎么快速建模警示牌路障模型?

C4D怎么快速建模警示牌路障模型?如果道路在施工,需要使用一些警示牌路障来防止车辆通行,该怎么建模三维立体的警示牌呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

c4d怎么建模圆形杯子? c4d茶杯建模教程

c4d怎么建模圆形杯子?c4d中想要建模一款圆形的杯子,该怎么圆形杯子呢?下面我们就来看看c4d茶杯建模教程,需要的朋友可以参考下
收藏 0 赞 0 分享

C4D怎么快速建模病毒模型? c4d病毒结构模型创建方法

C4D怎么快速建模病毒模型?现在新冠肺炎病毒在全世界的影响很大,想要创建一个病毒模型,该怎么创建呢?下面我们就来看看c4d病毒结构模型创建方法,需要的朋友可以参考下
收藏 0 赞 0 分享

Sketch怎么删除组件? Sketch组件删除方法

Sketch怎么删除组件?Sketch绘制图形想要添加各种组件,有些组件并不常用,想要删除,该怎么删除呢?下面我们就来看看Sketch组件删除方法,需要的朋友可以参考下
收藏 0 赞 0 分享

Axure怎么创建页面常见的Tab页效果?

Axure怎么创建页面常见的Tab页效果?Axure中经常制作页面,想要制作Tab页效果,该怎么制作呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

X-Particles4怎么激活?X-Particles4.0离线版中文永久激活图文教程(含下载)

X-Particles离线版是一款运行在Cinema 4D平台下的超强粒子插件,包含了刚体、柔体动力学、布料解算、SPH流体,甚至还能模拟布料。这里提供X-Particles离线破解版的安装使用教程,内含下载
收藏 0 赞 0 分享

C4D怎么创建三维立体的箭头模型?

C4D怎么创建三维立体的箭头模型?C4D中想要创建三维立体的箭头模型,该怎么创建箭头?我们有两种方法,下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

C4D文字怎么添加不同的颜色?

C4D文字怎么添加不同的颜色?C4D想要给文字不停的部分填充不同的颜色,该怎么操作呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

MindMaster思维导图主题怎么添加箭头图标?

MindMaster思维导图主题怎么添加箭头图标?MindMaster画的思维导入想要给主题添加箭头,该怎么添加呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

MindMaster思维导图主题怎么添加注释?

MindMaster思维导图主题怎么添加注释?MindMaster绘制的思维导图,想要给主题添加注释,更方便理解,该怎么添加注释呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多