Axure中想要設(shè)計一款三級菜單,該怎么設(shè)計呢?下面我們就來看看詳細的教程。

1、我們先放入菜單的相關(guān)元件,這里我使用的是矩形。

2、我們把三級菜單的三個元件全選,在上面點擊鼠標(biāo)右鍵,選擇【轉(zhuǎn)換為動態(tài)面板】的選項。

3、把這個新出現(xiàn)的動態(tài)面板命名為“3”;并且,再次點擊鼠標(biāo)右鍵或者在快捷功能區(qū)中,把這個動態(tài)面板【設(shè)為隱藏】。

4、二級菜單元件的【鼠標(biāo)單擊時】添加用例,設(shè)置動作為【切換可見性】,勾選目標(biāo)元件“3”,并且勾選設(shè)置中的【推動/拉動元件】。

5、我們把二級菜單和三級菜單全選,同樣點擊鼠標(biāo)右鍵,選擇【轉(zhuǎn)換為動態(tài)面板】的選項。

6、然后,把這個新出現(xiàn)的動態(tài)面板命名為“4”。ps:如果是拖入的動態(tài)面板尺寸是固定的,需要在屬性中勾選【自動調(diào)整為內(nèi)容尺寸】的選項。

7、雙擊動態(tài)面板“4”,再雙擊第一個狀態(tài)“State1”,繼續(xù)為二級菜單元件的【鼠標(biāo)單擊時】添加動作。我們先添加【隱藏】外層動態(tài)面板“4”的動作,并且勾選【拉動元件】的選項。

8、繼續(xù)為二級菜單元件的【鼠標(biāo)單擊時】添加第3個動作,也就是上面提到的【顯示】外層動態(tài)面板“4”,同時,在【更多選項】中選擇【推動元件】的選項。

9、把做好的二級菜單和三級菜單一起選中,根據(jù)需求復(fù)制幾份擺放好。
ps:復(fù)制時,不要單獨復(fù)制二級菜單和三級菜單,必須二級菜單和三級菜單一起復(fù)制,這樣交互的對應(yīng)關(guān)系才會繼續(xù)有效。


10、為一級菜單添加【鼠標(biāo)單擊時】的用例,設(shè)置動作【切換可見性】,勾選動態(tài)面板“4”,同時在設(shè)置中勾選【推動/拉動元件】。添加了這個交互之后,點擊一級菜單時,就能點一下顯示二級菜單,再點一下隱藏二級菜單。
新聞熱點
疑難解答
圖片精選