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

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

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

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

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

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

查看詳情

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

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

3、此時第最后一個一級菜單設(shè)置完成了，但因為前面的一級菜單需要通過點擊，顯示其下方的子菜單，同時使第三個一級菜單與其下屬子菜單向下移動，所以，我們需要將第三個一級菜單與其子菜單視作一個整體，使他們一同移動，所以，此時需將其設(shè)置為一個動態(tài)面板；

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

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