Axure RP怎么制作彈出菜單的效果?

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ì)的教程。

原型設(shè)計(jì)工具Axure RP Pro 8.1特別版 中文漢化特別版(附漢化包+注冊(cè)碼+安裝教程)
- 類型:輔助設(shè)計(jì)
- 大小:90.5MB
- 語(yǔ)言:簡(jiǎn)體中文
- 時(shí)間:2018-05-24
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)注腳本之家。
相關(guān)推薦:
Axure RP 8怎么設(shè)置頁(yè)面彈出框居中顯示?
相關(guān)文章
Axure RP的全局輔助線和頁(yè)面輔助線有什么區(qū)別?
利用Axure RP設(shè)計(jì)繪制原型圖時(shí)需要用到輔助線,目的很明確,就是合理劃分頁(yè)面結(jié)構(gòu)、讓排版更好看。Axure RP軟件中有兩種輔助線,即全局輔助線、頁(yè)面輔助線,本文詳細(xì)介紹了2019-04-12- 正常情況下,利用Axure RP制作的原型圖文件無(wú)法使用其他軟件打開,為了方便,你可以將原型圖轉(zhuǎn)換成圖片格式。下文介紹了將Axure原型圖導(dǎo)出為圖片格式的方法,請(qǐng)參考2019-04-11
Axure RP如何利用輔助線進(jìn)行元件對(duì)齊?
Axure RP是一款非常專業(yè)的原型設(shè)計(jì)工具,通用性極強(qiáng),可以用來(lái)快速繪制流程圖、線框圖。我們?cè)诶L制原型圖時(shí)為了確保元件之間互相對(duì)齊,需要借助輔助線來(lái)幫忙,下文詳細(xì)介紹2019-04-11- Axure RP8怎么快速導(dǎo)入圖片?Axure RP8中想要插入圖片,該怎么插入圖片呢?下面我們就來(lái)看看Axure RP8導(dǎo)入圖片的兩種方法,需要的朋友可以參考下2018-12-24
- Axure RP8提示文字怎么設(shè)置為紅色?Axure RP8設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候,添加了提示文字,想要設(shè)置提示位子的顏色為紅色,比較醒目,該怎么設(shè)置呢?下面我們就來(lái)看看詳細(xì)的教程,需要2018-12-16
- Axure RP8元件怎么設(shè)置顏色與透明?Axure RP8制作網(wǎng)頁(yè)原型的時(shí)候,插入的元件想要添加顏色并設(shè)置透明度,下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2018-12-13
Axure RP8元件怎么設(shè)置默認(rèn)角度?
Axure RP8元件怎么設(shè)置默認(rèn)角度?Axure RP8中插入的矩形元件,默認(rèn)是水平放置的,想要傾斜45度角度,該怎么操作呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2018-12-13- Axure RP8元件怎么重命名?Axure RP8中的元件想要修改名稱,該怎么修改呢?下面我們就來(lái)看看Axure RP8元件重命名的教程,需要的朋友可以參考下2018-12-12
Axure8交互設(shè)計(jì)怎么導(dǎo)入rp文件?
Axure8交互設(shè)計(jì)怎么導(dǎo)入rp文件?Axure8設(shè)計(jì)網(wǎng)頁(yè)原型的時(shí)候,想要導(dǎo)入rp文件,該怎么導(dǎo)入恩?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2018-09-05Axure RP無(wú)法預(yù)覽頁(yè)面怎么辦?
使用Axure RP繪制原型圖,你可以在畫完之后先進(jìn)行預(yù)覽,查看不足之處,但有時(shí)候會(huì)出現(xiàn)無(wú)法預(yù)覽的情況,這是為什么呢?怎么解決?如果Axure無(wú)法正常預(yù)覽頁(yè)面,可以參考以下2019-04-25