Axure RP怎么制作彈出菜單的效果?
我要評論Axure設(shè)計(jì)的網(wǎng)頁中想要制作一個彈出菜單，就是當(dāng)鼠標(biāo)移入頭像的時候，出現(xiàn)下拉菜單，用戶可以進(jìn)行相應(yīng)的操作，比如百度的首頁效果一樣，當(dāng)移到“更多產(chǎn)品”的時候，就出現(xiàn)了其他的菜單選項(xiàng)，該怎么制作呢？下面我們就來看看詳細(xì)的教程。
原型設(shè)計(jì)工具Axure RP Pro 8.1特別版 中文漢化特別版(附漢化包+注冊碼+安裝教程)
- 類型：輔助設(shè)計(jì)
- 大?。?/span>90.5MB
- 語言：簡體中文
- 時間：2018-05-24
1、首先打開Axure RP，插入一個全新的頁面，如下圖所示。
2、在空白頁面中從元件庫中拖動一個矩形到空白頁面中，本文以模擬實(shí)現(xiàn)百度首頁為例進(jìn)行說明。在矩形框中輸入【更多產(chǎn)品】，如下圖所示。
3、從元件庫中拖動一個動態(tài)面板到頁面中，該動態(tài)面板的內(nèi)容為鼠標(biāo)移入后要展示的內(nèi)容，如下圖所示。
4、雙擊該動態(tài)面板，在彈出的對話框中，為動態(tài)面板命名，雙擊【State1】進(jìn)入動態(tài)面板的編輯頁面，如下圖1所示，編輯完后的內(nèi)容如下圖2所示。
5、因?yàn)橐婚_始動態(tài)面板的內(nèi)容是隱藏的，所以請鼠標(biāo)右鍵點(diǎn)擊動態(tài)面板，在彈出的對話框中設(shè)置【隱藏】，如下圖所示。
6、為矩形框添加事件。當(dāng)鼠標(biāo)移入的時候就出現(xiàn)動態(tài)面板的內(nèi)容。先選擇矩形框，在右側(cè)的【屬性】中找到【鼠標(biāo)移入時】，如下圖標(biāo)紅框所示。
7、雙擊【鼠標(biāo)移入時】后，在彈出的用例編輯頁面中，找到【顯示/隱藏】，并單擊他，根據(jù)設(shè)置的動態(tài)面板的名稱，找到該動態(tài)面板，并設(shè)置為可見。如下圖所示。
8、點(diǎn)擊【確定】退出用例編輯頁面，這時候已經(jīng)完成彈出菜單效果的設(shè)置了，點(diǎn)擊預(yù)覽， 在瀏覽器中默認(rèn)是下圖1 的效果，當(dāng)鼠標(biāo)移到【更多產(chǎn)品】后就變成了下圖2 的效果了。
以上就是Axure制作彈出菜單的效果的教程，希望大家喜歡，請繼續(xù)關(guān)注腳本之家。
相關(guān)推薦：
相關(guān)文章
Axure RP的全局輔助線和頁面輔助線有什么區(qū)別?
利用Axure RP設(shè)計(jì)繪制原型圖時需要用到輔助線，目的很明確，就是合理劃分頁面結(jié)構(gòu)、讓排版更好看。Axure RP軟件中有兩種輔助線，即全局輔助線、頁面輔助線，本文詳細(xì)介紹了2019-04-12
正常情況下，利用Axure RP制作的原型圖文件無法使用其他軟件打開，為了方便，你可以將原型圖轉(zhuǎn)換成圖片格式。下文介紹了將Axure原型圖導(dǎo)出為圖片格式的方法，請參考2019-04-11
Axure RP是一款非常專業(yè)的原型設(shè)計(jì)工具，通用性極強(qiáng)，可以用來快速繪制流程圖、線框圖。我們在繪制原型圖時為了確保元件之間互相對齊，需要借助輔助線來幫忙，下文詳細(xì)介紹2019-04-11
Axure RP8怎么快速導(dǎo)入圖片？Axure RP8中想要插入圖片，該怎么插入圖片呢？下面我們就來看看Axure RP8導(dǎo)入圖片的兩種方法，需要的朋友可以參考下2018-12-24
Axure RP8提示文字怎么設(shè)置為紅色？Axure RP8設(shè)計(jì)網(wǎng)頁的時候，添加了提示文字，想要設(shè)置提示位子的顏色為紅色，比較醒目，該怎么設(shè)置呢？下面我們就來看看詳細(xì)的教程，需要2018-12-16
Axure RP8元件怎么設(shè)置顏色與透明？Axure RP8制作網(wǎng)頁原型的時候，插入的元件想要添加顏色并設(shè)置透明度，下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-12-13
Axure RP8元件怎么設(shè)置默認(rèn)角度?
Axure RP8元件怎么設(shè)置默認(rèn)角度？Axure RP8中插入的矩形元件，默認(rèn)是水平放置的，想要傾斜45度角度，該怎么操作呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-12-13
Axure RP8元件怎么重命名？Axure RP8中的元件想要修改名稱，該怎么修改呢？下面我們就來看看Axure RP8元件重命名的教程，需要的朋友可以參考下2018-12-12
Axure8交互設(shè)計(jì)怎么導(dǎo)入rp文件?
Axure8交互設(shè)計(jì)怎么導(dǎo)入rp文件？Axure8設(shè)計(jì)網(wǎng)頁原型的時候，想要導(dǎo)入rp文件，該怎么導(dǎo)入恩？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-09-05
使用Axure RP繪制原型圖，你可以在畫完之后先進(jìn)行預(yù)覽，查看不足之處，但有時候會出現(xiàn)無法預(yù)覽的情況，這是為什么呢？怎么解決？如果Axure無法正常預(yù)覽頁面，可以參考以下2019-04-25
