axure怎么设计菜单横向隐藏与显示的效果?
番茄系统家园 · 2022-11-22 02:29:32
最近有若干个伙伴找我咨询axure的用法，让我这颗凉了许久的心又再次感受到一点温度，也忽然意识到，凡事坚持不懈的做下去，总会有收获的，所以，本人近期将持续更新一些常用的小技巧，以便广大还在摸索axure的朋友使用。本次将以讲解如何做出满意的隐藏菜单横向隐藏与显示的效果。
- 软件名称：
- Axure RP Pro(快速原型设计工具) V8.0.0.3333 绿色英文免费版
- 软件大小：
- 48.2MB
- 更新时间：
- 2017-04-10
1、在做菜单动态效果之前，诸位应该首先需要知道，我们需要什么组件，以最简单的样式来说，首先我们需要一个菜单的动态面板，一个菜单的显示按钮，一个菜单的隐藏按钮，若需要，还可增加一个菜单的具体页面。
2、菜单与图片的显示，要按照自己的要求来设定，比如若想要进入页面后，页面的菜单是显示状态的，则菜单与菜单隐藏按钮直接显示出来，菜单的显示按钮隐藏掉即可，反之，则要隐藏掉菜单与菜单隐藏按钮，直接显示出菜单显示按钮，此外将菜单的显示/隐藏按钮做成动态面板，通过点击来回切换，也是可行的。
3、设置好需要隐藏的菜单后，将隐藏与显示按钮位置重合覆盖掉后平移至需要的位置，比如x轴为0的位置后即可，此时需要开始添加动态事件。
4、动态效果需要对两个按钮分别添加，对隐藏按钮来说，需要添加点击后，可将菜单隐藏掉，可将自己隐藏掉，同事还可显示出菜单显示按钮的动态事件；对显示按钮来说，效果基本都是反向的，具体如图所示
5、最终效果如下，可通过点击实现菜单向左隐藏，向右显示的效果。
6、菜单显示隐藏的效果需要视情况而定，比如网页版，像360导航首页，右侧本身有留白区域，菜单的隐藏显示基本与主页面无关，但本人经历过的OA、CRM等办公系统，在设计菜单隐藏显示效果时一般都会要求页面内容与菜单隐藏显示效果一起移动，这点应该在对应的系统设计中，按要求实现。
