Axure動(dòng)態(tài)面板怎么制作三級(jí)菜單?

發(fā)布時(shí)間：2018-03-08 16:39:25 作者：仰望天空城的愛

Axure動(dòng)態(tài)面板怎么制作三級(jí)菜單？Axure想要設(shè)計(jì)一個(gè)網(wǎng)頁的三級(jí)菜單，該怎么設(shè)計(jì)呢？我們可以使用動(dòng)態(tài)面板實(shí)現(xiàn)，下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下

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

原型設(shè)計(jì)工具Axure RP Pro 8.1特別版中文漢化特別版(附漢化包+注冊(cè)碼+安裝教程)

類型：輔助設(shè)計(jì)
大小：90.5MB
語言：簡(jiǎn)體中文
時(shí)間：2018-05-24

查看詳情

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

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

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

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

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

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

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

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

9、把做好的二級(jí)菜單和三級(jí)菜單一起選中，根據(jù)需求復(fù)制幾份擺放好。

ps:復(fù)制時(shí)，不要單獨(dú)復(fù)制二級(jí)菜單和三級(jí)菜單，必須二級(jí)菜單和三級(jí)菜單一起復(fù)制，這樣交互的對(duì)應(yīng)關(guān)系才會(huì)繼續(xù)有效。

10、為一級(jí)菜單添加【鼠標(biāo)單擊時(shí)】的用例，設(shè)置動(dòng)作【切換可見性】，勾選動(dòng)態(tài)面板“4”，同時(shí)在設(shè)置中勾選【推動(dòng)/拉動(dòng)元件】。添加了這個(gè)交互之后，點(diǎn)擊一級(jí)菜單時(shí)，就能點(diǎn)一下顯示二級(jí)菜單，再點(diǎn)一下隱藏二級(jí)菜單。

11、點(diǎn)擊一級(jí)菜單的時(shí)候，三級(jí)菜單默認(rèn)是收起的狀態(tài)。繼續(xù)為一級(jí)菜單元件添加【鼠標(biāo)單擊時(shí)】的交互，設(shè)置動(dòng)作【隱藏】所有的三級(jí)菜單所在的動(dòng)態(tài)面板“3”，并且在隱藏的設(shè)置中都要勾選【拉動(dòng)元件】的選項(xiàng)。