Axure怎么設計多層級菜單下拉聯(lián)動效果?
我要評論菜單的下拉聯(lián)動多種多樣，多辦公軟件來說，菜單往往有多個層級，可以下拉聯(lián)動，通過下拉來顯示出子菜單，同時還可以移動其他未展開或已展開的菜單。下面由我來為大家講解一下我的實現(xiàn)思路，其實非常像做千層餅，而且我是從最內層開始做的。
1、以三個一級菜單為例，我們可以直接先做第三個一級菜單，新建一個一級菜單，起名為第三個一級菜單，同時在它下方建立好三個子菜單，建好后將子菜單全選中后轉換為動態(tài)面板，并設置隱藏。
2、菜單的聯(lián)動效果一般是通過點擊來觸發(fā)的，所以，此時對第三個一級菜單添加點擊事件，此時需注意：因為點擊時可能觸發(fā)兩個動作，所以點擊事件需要添加條件進行判斷，如：當子菜單面板是隱藏的時候，點擊后可顯示子菜單；當子菜單是顯示的時候，點擊后可隱藏子菜單。同時可在事件內加動態(tài)效果，如向下顯示、向上隱藏，時間暫定500ms；
3、此時第最后一個一級菜單設置完成了，但因為前面的一級菜單需要通過點擊，顯示其下方的子菜單，同時使第三個一級菜單與其下屬子菜單向下移動，所以，我們需要將第三個一級菜單與其子菜單視作一個整體，使他們一同移動，所以，此時需將其設置為一個動態(tài)面板；
4、下面我們來做第二個一級菜單，同樣的制作原理與步驟與第三個一級菜單與子菜單一致，但需要把剛剛做好的動態(tài)面板一并放置在同一頁面，以便后續(xù)操作；
5、此時對第二個一級菜單做點擊事件的添加：當子菜單面板是隱藏的時候，點擊后可顯示子菜單；當子菜單是顯示的時候，點擊后可隱藏子菜單。但與前一個一級菜單相比，需多加一個效果，即移動第三個一級菜單的動態(tài)面板，移動距離以子菜單的高度*子菜單數(shù)量，比如我例子中用的是三個高40的子菜單，則需分別對y坐標移動+/-120;
6、此時可以適當運行一下效果，驗證做法是否有誤，效果如圖，效果正確后，將剛剛所做的所有內容全選，并設置成一個動態(tài)面板
7、此時重復第四五步驟，事件添加后發(fā)布嘗試，可看到效果如圖；此時多個菜單面板層層獨立，均可通過點擊實現(xiàn)下拉顯示與收起，且處于其下方的菜單，也會跟著移動，不對有錯誤的效果出現(xiàn)。
8、最后，調整各個面板的位置，統(tǒng)一對齊后，效果如圖，此時就完成了三級菜單下拉顯示的效果了
相關推薦：
相關文章
Axure RP 8怎么新建母版面板并管理？Axure中想要統(tǒng)一風格，就可以使用母版來統(tǒng)一格式，該怎么新建母版并編輯呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2017-01-11
axure怎么設計鼠標移入移出顯示或隱藏面板？axure中想要設計一個動態(tài)面板，根據(jù)鼠標的移入移出來顯示或隱藏面板，下面我們就來看看詳細的教程，需要的朋友可以參考下2017-01-11
Axure怎么設計網(wǎng)頁的登陸頁面？Axure中想要設計一個網(wǎng)頁的登陸界面，輸入用戶名密碼，該怎么設置呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2017-01-09
Axure RP 8怎么價格2D圖形轉換成3D圖？Axure RP 8中繪制的平面圖想轉換成3d立體圖，該怎么設置呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2017-01-06
Axure RP 8設怎么繪制拱橋倒影圖？想要制作一個圓拱橋并且設置倒影相互映襯，該怎么繪制呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2017-01-06
Axure RP 8怎么利用按鈕控制單選框和復選框？Axure中想要設計一個通過按鈕來空值單選框和復選框的原型，該怎么制作呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2017-01-05
Axure RP 8怎么制作圓形不斷變換透明度的效果？Axure RP 8中想要繪制五個大小不同的圓形，中間的圓形可以控制周圍圓形的與透明度，該怎么誰及呢？下面我們就來看看詳細的教2017-01-05
Axure RP 8怎么給下拉列表框添加多個值？Axure RP 8中想要制作一個下拉列表，有多個數(shù)值，該怎么制作呢？下面我們就來Axure給下拉列表框添加多行值的教程，需要的朋友可以2017-01-05
Axure RP 8橢圓形元件怎么設置透明度陰影等屬性？Axure RP 8中自帶了橢圓形元件，這個元件怎么設置陰影、邊框、填充色呢？下面我們就來看看詳細的教程，需要的朋友可以參考2017-01-04
Axure RP 8怎么設計內聯(lián)框架原型？Axure設計網(wǎng)頁原型的時候，想要做一個內部嵌套框架或頁面，將視頻、頁面、地圖放入框架中，該怎么設計呢？下面我們就來看看詳細的教程，2017-01-04
