Axure怎么設(shè)計(jì)多層級(jí)菜單下拉聯(lián)動(dòng)效果?

發(fā)布時(shí)間：2017-04-23 11:31:31 作者：佚名

Axure怎么設(shè)計(jì)多層級(jí)菜單下拉聯(lián)動(dòng)效果？Axure中想要制作一個(gè)聯(lián)動(dòng)下拉菜單，該怎么制作呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下

菜單的下拉聯(lián)動(dòng)多種多樣，多辦公軟件來(lái)說(shuō)，菜單往往有多個(gè)層級(jí)，可以下拉聯(lián)動(dòng)，通過(guò)下拉來(lái)顯示出子菜單，同時(shí)還可以移動(dòng)其他未展開或已展開的菜單。下面由我來(lái)為大家講解一下我的實(shí)現(xiàn)思路，其實(shí)非常像做千層餅，而且我是從最內(nèi)層開始做的。

Axure RP Pro(快速原型設(shè)計(jì)工具) V8.0.0.3333 綠色英文免費(fèi)版

類型：應(yīng)用其它
大?。?/span>48.2MB
語(yǔ)言：英文軟件
時(shí)間：2017-04-10

查看詳情

1、以三個(gè)一級(jí)菜單為例，我們可以直接先做第三個(gè)一級(jí)菜單，新建一個(gè)一級(jí)菜單，起名為第三個(gè)一級(jí)菜單，同時(shí)在它下方建立好三個(gè)子菜單，建好后將子菜單全選中后轉(zhuǎn)換為動(dòng)態(tài)面板，并設(shè)置隱藏。

2、菜單的聯(lián)動(dòng)效果一般是通過(guò)點(diǎn)擊來(lái)觸發(fā)的，所以，此時(shí)對(duì)第三個(gè)一級(jí)菜單添加點(diǎn)擊事件，此時(shí)需注意：因?yàn)辄c(diǎn)擊時(shí)可能觸發(fā)兩個(gè)動(dòng)作，所以點(diǎn)擊事件需要添加條件進(jìn)行判斷，如：當(dāng)子菜單面板是隱藏的時(shí)候，點(diǎn)擊后可顯示子菜單；當(dāng)子菜單是顯示的時(shí)候，點(diǎn)擊后可隱藏子菜單。同時(shí)可在事件內(nèi)加動(dòng)態(tài)效果，如向下顯示、向上隱藏，時(shí)間暫定500ms；

3、此時(shí)第最后一個(gè)一級(jí)菜單設(shè)置完成了，但因?yàn)榍懊娴囊患?jí)菜單需要通過(guò)點(diǎn)擊，顯示其下方的子菜單，同時(shí)使第三個(gè)一級(jí)菜單與其下屬子菜單向下移動(dòng)，所以，我們需要將第三個(gè)一級(jí)菜單與其子菜單視作一個(gè)整體，使他們一同移動(dòng)，所以，此時(shí)需將其設(shè)置為一個(gè)動(dòng)態(tài)面板；

4、下面我們來(lái)做第二個(gè)一級(jí)菜單，同樣的制作原理與步驟與第三個(gè)一級(jí)菜單與子菜單一致，但需要把剛剛做好的動(dòng)態(tài)面板一并放置在同一頁(yè)面，以便后續(xù)操作；

5、此時(shí)對(duì)第二個(gè)一級(jí)菜單做點(diǎn)擊事件的添加：當(dāng)子菜單面板是隱藏的時(shí)候，點(diǎn)擊后可顯示子菜單；當(dāng)子菜單是顯示的時(shí)候，點(diǎn)擊后可隱藏子菜單。但與前一個(gè)一級(jí)菜單相比，需多加一個(gè)效果，即移動(dòng)第三個(gè)一級(jí)菜單的動(dòng)態(tài)面板，移動(dòng)距離以子菜單的高度*子菜單數(shù)量，比如我例子中用的是三個(gè)高40的子菜單，則需分別對(duì)y坐標(biāo)移動(dòng)+/-120;

6、此時(shí)可以適當(dāng)運(yùn)行一下效果，驗(yàn)證做法是否有誤，效果如圖，效果正確后，將剛剛所做的所有內(nèi)容全選，并設(shè)置成一個(gè)動(dòng)態(tài)面板

7、此時(shí)重復(fù)第四五步驟，事件添加后發(fā)布嘗試，可看到效果如圖；此時(shí)多個(gè)菜單面板層層獨(dú)立，均可通過(guò)點(diǎn)擊實(shí)現(xiàn)下拉顯示與收起，且處于其下方的菜單，也會(huì)跟著移動(dòng)，不對(duì)有錯(cuò)誤的效果出現(xiàn)。