接上篇移动端左右滑动菜单效果制作，这次记录一下切入式菜单的在AxureRP中的实现方式。

首先在画板上先按屏幕尺寸建立一个顶部的区域，宽320，高40；顶部左侧放菜单的按钮；在下面剩下的区域放一个动态面板，命名为（top_menu），宽320，高450，覆盖屏幕减去顶部的全部区域：

动态面板top_menu的State1下面再建立两个动态面板:
top_menu_blackBg，一个黑色背景区域，宽320，高450，作用是菜单切入后在菜单以外的区域背景变暗；
top_menu_menu，菜单主体，放置在top_menu_blackBg上面，做成一个竖直的菜单，宽150，高450，位置左-150，这样它就到屏幕左侧看不见了，做好每个按钮的链接：

此时页面最外层的top_menu面板结构如下：

接下来添加逻辑，分为3步
#1. 由于菜单是默认显示的，虽然top_menu的位置预先设置在屏幕外没，但top_menu_blackBg是在屏幕内的，当页面加载的时候，就要先隐藏掉整个菜单：

#2. 点击顶部的菜单按钮才会弹出菜单，弹出的步骤是先显示top_menu，再让原本在左侧的top_menu_menu滑到屏幕中，然后让黑色背景top_menu_blackBg渐显出来。这里设置了让top_menu_blackBg渐显的逻辑，则显现之前他就会自动隐藏，因此不需要额外添加让它隐藏的命令。

#3.接下来是关闭菜单的逻辑，就是点一下黑色背景，菜单就滑回去了。
动作要分几步走，先用300ms时间让top_menu_menu滑到左侧屏幕外；此时等上300ms，再隐藏top_menu_blackBg和整个的top_menu，这样动作就连贯了。把这些事件添加到top_menu_blackBg上

如果是为Android设备设计这个原型，别忘了在手机壳的菜单按钮上也加上上面的#2事件，这样才算完成

效果演示：
http://brain1981.com/work/prototype-HPCmobile/Main_menu.html

本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/140.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。

本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。