右键菜单在软件系统中很常见，它包含各种命令可供选择。本文分享了用中继器制作右键显示菜单，结合动态面板实现快速菜单页跳转效果的方法。让我们看看。

右键菜单在软件系统中很常见，它可以作为一种快速的方式，包含各种命令。今天，作者将教你如果用中继器制作一个右键显示菜单的原型模板，并结合动态面路由网板跳转快速菜单页面。

原型地址：https://h2pkno.axshare.com/#g=1

事实上，鼠标右键菜单最重要的困难是鼠标右键，因为Axure通过浏览器发布预览，浏览器本身也有右键菜单的快速操作，所以当我们做鼠标右键时，首先显示浏览器本身的右键菜单，导致原型中鼠标右键的动作失败。

那我们就要考虑一下，浏览器中右键显示的快捷菜单能否禁用？当然，事实上，我们可以通过代码禁用它，相应的代码如：

我们可以将上述代码复制到字体中，然后在预览演示时自动生效。具体操作是点击工具栏的发布生成html文件-选择fonts——添加字体-选择@font-face——复制代码进入。这样，在不触发浏览器鼠标右击的情况下，原型中鼠标右键的交互就可以实现默认操作。这样，在不触发浏览器鼠标右击的情况下，原型中鼠标右键的交互就可以实现默认操作。

注：上述方法为Axure其他版本的操作路径可能不同，但可行。

本案例由不同动态面板的中继器菜单和动态面板制成。stare将相应的内容放入其中，然后通过设置面板状态的交互，可以跳转不同的页面。当然，如果你不想把页面放在动态面板上，你也可以使用多个页面和打开链接的交互。你可以根据你的实际需要来操作，你的想法是一样的。

然后，在将页面内容放入动态面板的不同状态后，我们应该将动态面板的每个状态state命名为与菜单一致的名称。在这种情况下，我的论文、我的收藏、我的问答、我的关注、我的大拇指、我的通知、我的记录和我的信息。此步骤的命名涉及到的跳转。

我们可以在中继器的默认表格中填写菜单名称，与之前的动态面板名称一致。在这种情况下，我的论文、我的收藏、我的问答、我的关注、我的拇指、我的通知、我的记录和我的信息。

如果需要元件的样式和其他效果，可以自由添加，如移动变色，可以在元件样式悬挂时添加；如果需要阴影效果，也可以自由添加。这里不详细说明，可以根据自己的喜好设置。

首先，我们使用显示的交互来显示菜单组合中继器。请注意，我们应该选择灯箱效果。灯箱的颜色可以是同名。设置后，如果单击菜单外的内容，菜单可以自动隐藏。

然后，我们必须让弹出菜单移动到鼠标指针的位置，这里我们可以使用移动交互，选择到达，这里需要使用鼠标指针的函数Cursor.x和Cursor.y，对应鼠标指针所在的x坐标值和y坐标值。

最后，为了显示弹出而不跳出窗口，我们在移动时增加了边界window函数，window.height窗高，window.width是窗口的宽度，我们设置菜单的右边界小于窗口的宽度，下边界小于窗口的宽度。

如果鼠标点击页面空白，交互就像上面一样。考虑到上面的动态面板不是全屏的，我们不需要复制上面的交互。我们可以直接触发动态面板鼠标右击时的触发交互。

当鼠标单击中继器菜单中的选项时，我们使用设置面板状态的交互。设置页面动态面板的值是中继器表中当前记录的文本值。简单地说，你可以使用它item.column0(如果您没有更改列名，如果您更改列名，此处也会相应更改)或this.text。最后，我们可以用隐藏的互动隐藏菜单。

最后，在此提醒您，菜单选项名必须与动态面板中的状态名一一对应，否则无法跳转。

这样，我们就完成了鼠标右键显示中继器菜单的原型模板。下次使用时，只需在中继器表中填写选项即可自动生成交互。方便吗？感兴趣的同学可以试试。

本期教程到此结束。谢谢你的阅读。下次见，88~

本文由 @AI产品人 每个人都是产品经理，未经许可不得转载

题图来自 Unsplash，基于 CC0 协议