右键菜单在软件系统中是非常常见的，他可以作为一个快捷办法，里边包含各种命令可以选择。那本日作者请教大家，如果用中继器制作一个右键显示菜单的的原型模板，结合动态面板，实现快捷菜单页面跳转的效果。
【原型效果】
点击鼠标右键，弹出菜单，弹出的位置为鼠标指针的位置；
弹出的菜单由中继器制作，在中继器表格中输入选项后自动天生交互效果；
点击菜单选项，可以实现页面的跳转，案例中是中继器和动态面板间的联动。
【制作教程】一、重点难点和解决思路讲解
实在做鼠标右键菜单的最紧张的难点是鼠标右键这个动作，由于Axure是通过浏览器来发布预览的，而浏览器自身也有右键菜单的快捷操作，以是当我们做鼠标右键这个操作时，首先是显示浏览器自身的右键菜单，从而导致原型中的鼠标右键这个动作失落效。
那我们就要考虑，能不能把浏览器中的右键显示的快捷菜单这个操作禁用呢？当然可以，实在我们可以通过代码的办法将它禁用掉，对应的代码如：
我们可以把上述代码复制到字体里，那在预览演示的时候就会自动生效，详细操作是点击工具栏的发布——天生html文件——选择fonts——添加字体——选择@font-face——将代码复制进入。这样就可以实现原型内鼠标右键的交互而又不触发浏览器鼠标右击的默认操作。注：上述方法为Axure的操作路径，其他版当地位可能有所出入，但是都是可行的。
二、紧张的制作材料1、动态面板（页面内容）
本案例是用中继器菜单和动态面板联动制作的，在动态面板不同的stare里面放入对应的内容，然后后续可以通过设置面板状态的交互就可以实现跳转不同的页面了。当然了如果你们不想把页面放在动态面板内，也可以用多个页面，用打开链接的交互也可以实现。详细可以按照你们实际需求操作，思路都是一样的。
那我们把页面内容放进动态面板里不同的状态后，要把动态面板每个状态state命名成和菜单同等的名字，案例中为我的论文、我的收藏、我的问答、我的关注、我的点赞、我的关照、我的记录、我的资料，这一步命名涉及后面页面的跳转。2、中继器
我们在中继器默认的表格里填写菜单名称，和前面动态面板名称同等即可，案例中为我的论文、我的收藏、我的问答、我的关注、我的点赞、我的关照、我的记录、我的资料。
元件的样式和其他的效果须要的话可以自由添加，例如移入变色，可以在元件样式悬停时添加；须要阴影效果的也可以自由添加，这里就不详细解释了，可以根据自己的喜好设置。三、交互制作
1、鼠标右键点击动态面板时
首先我们用显示的交互，将菜单组合中继器显示出来，这里把稳我们要选择灯箱效果，灯箱颜色为同名即可，这样设置往后，如果点击菜单外的内容，菜单就可以自动隐蔽
然后，我们还要让弹窗菜单移动到鼠标指针的位置，这里我们用移动的交互就可以了，选择到达，这里须要用到鼠标指针的函数Cursor.x和Cursor.y，分别对应鼠标指针所在的x坐标值和y坐标值。末了我们为了显示的弹出不跳出窗口，我们在移动时增加边界，这里用到window函数，window.height是窗口高度，window.width是窗口的宽度，我们设置菜单的右边界小于窗口的宽度，下边界小于窗口的宽度即可。
2、鼠标右键点击页面空缺地方时
如果鼠标点击页面空缺地方时，实在交互也是和上面一样，这里考虑到上面的动态面板不是全屏的，以是我们补充这个交互，我们也不用复制上面的交互，我们直接用触发的交互，触发动态面板鼠标右击时的交互即可。
3、中继器菜单内部矩形鼠标单击时
鼠标单击中继器菜单里面的选项时，我们用设置面板状态的交互，设置页面动态面板的值为中继器表格内当前行记录的文本值，大略来说你们可以用item.column0（如果你们没有改列名，如果改了列名这里也对应变革）或者this.text。末了我们用隐蔽的交互，将菜单隐蔽起来即可。末了的末了，这里提醒一下，菜单选项名必须和动态面板里状态名逐一对应，不然就跳转不了的。
这样我们就完成了鼠标右键显示中继器菜单原型模板了，下次利用时，我们只须要在中继器表格里填写选项，即可自动天生交互，是不是很方便呢？感兴趣的同学们可以动手试试哦。
本文由大家都是产品经理作者【AI产品人】，微信"大众号：【Axure高保真原型】，原创/授权 发布于大家都是产品经理，未经容许，禁止转载。
题图来自Unsplash，基于 CC0 协议。
