右鍵菜單在軟件系統中是非常常見的，他可以作為一個快捷方式，里邊包含各種命令可以選擇。那今天作者就教大家，如果用中繼器制作一個右鍵顯示菜單的的原型模板，結合動態面板，實現快捷菜單頁面跳轉的效果。

一、制作完成后應具備以下效果?

點擊鼠標右鍵，彈出菜單，彈出的位置為鼠標指針的位置；

彈出的菜單由中繼器制作，在中繼器表格中輸入選項后自動生成交互效果；

點擊菜單選項，可以實現頁面的跳轉，案例中是中繼器和動態面板間的聯動。

【原型預覽】

https://www.pmdaniu.com/storages/129298/7c3906f99727af37a3bdcf3d5f601ebb-69620/start.html#g=1&id=816tnj&p=%E9%BC%A0%E6%A0%87%E5%8F%B3%E5%87%BB%E8%8F%9C%E5%8D%95

【原型下載】

方式1：加入原型分享群后，可免費分享該原型，請咨詢微信522073109

方式2：https://weidian.com/item.html?itemID=3622372069

那下面我們一起開始學習制作吧。

二、重點難點和解決思路講解

? ? ? ?其實做鼠標右鍵菜單的最主要的難點是鼠標右鍵這個動作，因為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。最后我們用隱藏的交互，將菜單隱藏起來即可。最后的最后，這里提醒一下，菜單選項名必須和動態面板里狀態名一一對應，不然就跳轉不了的。

? ? ? 這樣我們就完成了鼠標右鍵顯示中繼器菜單原型模板了，下次使用時，我們只需要在中繼器表格里填寫選項，即可自動生成交互，是不是很方便呢？感興趣的同學們可以動手試試哦。

那本期的教程就到此為止了，感謝您的閱讀，我們下期見，88~

總結

以上是生活随笔為你收集整理的【Axure教程】鼠标右键显示菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。