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

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

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

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

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

5、因?yàn)橐婚_始動(dòng)態(tài)面板的內(nèi)容是隱藏的，所以請(qǐng)鼠標(biāo)右鍵點(diǎn)擊動(dòng)態(tài)面板，在彈出的對(duì)話框中設(shè)置【隱藏】，如下圖所示。

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

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

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

以上就是Axure制作彈出菜單的效果的教程，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注武林網(wǎng)。

相關(guān)推薦：

axure怎么制作彈出框效果?

Axure RP怎么設(shè)計(jì)彈出窗口的效果?

Axure RP 8怎么設(shè)置頁(yè)面彈出框居中顯示?