Axure設計的網(wǎng)頁中想要制作一個彈出菜單，就是當鼠標移入頭像的時候，出現(xiàn)下拉菜單，用戶可以進行相應的操作，比如百度的首頁效果一樣，當移到“更多產(chǎn)品”的時候，就出現(xiàn)了其他的菜單選項，該怎么制作呢？下面我們就來看看詳細的教程。

軟件名稱：原型設計工具Axure RP Pro 8.1特別版 中文漢化特別版(附漢化包+注冊碼+安裝教程)軟件大小：90.5MB更新時間：2018-05-24

1、首先打開Axure RP，插入一個全新的頁面，如下圖所示。

2、在空白頁面中從元件庫中拖動一個矩形到空白頁面中，本文以模擬實現(xiàn)百度首頁為例進行說明。在矩形框中輸入【更多產(chǎn)品】，如下圖所示。

3、從元件庫中拖動一個動態(tài)面板到頁面中，該動態(tài)面板的內(nèi)容為鼠標移入后要展示的內(nèi)容，如下圖所示。

4、雙擊該動態(tài)面板，在彈出的對話框中，為動態(tài)面板命名，雙擊【State1】進入動態(tài)面板的編輯頁面，如下圖1所示，編輯完后的內(nèi)容如下圖2所示。

5、因為一開始動態(tài)面板的內(nèi)容是隱藏的，所以請鼠標右鍵點擊動態(tài)面板，在彈出的對話框中設置【隱藏】，如下圖所示。

6、為矩形框添加事件。當鼠標移入的時候就出現(xiàn)動態(tài)面板的內(nèi)容。先選擇矩形框，在右側(cè)的【屬性】中找到【鼠標移入時】，如下圖標紅框所示。

7、雙擊【鼠標移入時】后，在彈出的用例編輯頁面中，找到【顯示/隱藏】，并單擊他，根據(jù)設置的動態(tài)面板的名稱，找到該動態(tài)面板，并設置為可見。如下圖所示。

8、點擊【確定】退出用例編輯頁面，這時候已經(jīng)完成彈出菜單效果的設置了，點擊預覽， 在瀏覽器中默認是下圖1 的效果，當鼠標移到【更多產(chǎn)品】后就變成了下圖2 的效果了。

以上就是Axure制作彈出菜單的效果的教程，希望大家喜歡，請繼續(xù)關注錯新站長站。

相關推薦：