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

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

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

查看詳情

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

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

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

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

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

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

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

8、最后，調(diào)整各個(gè)面板的位置，統(tǒng)一對齊后，效果如圖，此時(shí)就完成了三級菜單下拉顯示的效果了

相關(guān)推薦：

Axure抽屜效果菜單效果該怎么制作?

axure8怎么制作tab菜單選中的效果?

Axure怎么制作頁面滾動時(shí)菜單固定在頂部的頁面？

最新評論