編輯導(dǎo)語(yǔ)：在日常工作中，我們經(jīng)常需要用到菜單欄，那么如何通過AxureRP 9制作一個(gè)動(dòng)態(tài)菜單？作者介紹了相關(guān)步驟，供你參考，幫助你更好地使用AxureRP 9制作工具。

如何用AxureRP 9制作一個(gè)動(dòng)態(tài)菜單？

需要使用到的工具有：AxureRP 9，本教程主要采用該工具中的動(dòng)態(tài)面板的移動(dòng)、顯示/隱藏來實(shí)現(xiàn)。

首先，使用基礎(chǔ)元件搭建一級(jí)菜單欄，可按照下圖所示建多個(gè)一級(jí)菜單：

• 步驟1：選擇一個(gè)矩形框。
• 步驟2：為矩形框填充顏色。
• 步驟3：為矩形框命名為：系統(tǒng)設(shè)置。

使用動(dòng)態(tài)面板搭建二級(jí)菜單欄，可按照下圖所示建多個(gè)二級(jí)菜單：

• 步驟1：選擇一個(gè)動(dòng)態(tài)面板；
• 步驟2：為動(dòng)態(tài)面板命名為：p1；
• 步驟3：雙擊動(dòng)態(tài)面板，進(jìn)入到面板圖層，在圖層中重復(fù)第（一）步的操作，在動(dòng)態(tài)面板中建多個(gè)二級(jí)菜單。

重復(fù)第一、二步操作，搭建出菜單的初始頁(yè)面。為了方便下面操作步驟的描述：這里對(duì)元件進(jìn)行統(tǒng)一的命名，且每個(gè)一級(jí)菜單下對(duì)應(yīng)的二級(jí)菜單分別是：

接下來為菜單加上交互動(dòng)作：我們要實(shí)現(xiàn)點(diǎn)擊一級(jí)菜單將其二級(jí)菜單收起和展開的效果，以【系統(tǒng)設(shè)置】和【p1】為例，點(diǎn)擊【系統(tǒng)設(shè)置】，【p1】可以顯示或隱藏，使用切換隱藏顯示來實(shí)現(xiàn)。

• 步驟1：選擇【系統(tǒng)設(shè)置】，點(diǎn)擊【新建交互】；
• 步驟2：選擇交互動(dòng)作“單擊時(shí)”；
• 步驟3：添加動(dòng)作：顯示/隱藏
• 步驟4：選擇需要顯示、隱藏的元件：【p1】；
• 步驟5：設(shè)置動(dòng)作為：切換；
• 步驟6：點(diǎn)擊“確定”。

至此，完成了一個(gè)一級(jí)菜單和其二級(jí)菜單的收縮與展開效果。其他菜單組按照上述操作進(jìn)行同樣設(shè)置。

當(dāng)二級(jí)菜單展開之后，其下面的菜單應(yīng)該往下進(jìn)行移動(dòng)。以【p1】為例，當(dāng)【p1】顯示時(shí)，【任務(wù)督辦】的坐標(biāo)x應(yīng)該移動(dòng)至【p1】的左方，【任務(wù)督辦】的坐標(biāo)y應(yīng)該移動(dòng)至【p1】的下方；

1. 步驟1：選擇動(dòng)態(tài)面板【p1】，點(diǎn)擊【新建交互】，選擇【顯示時(shí)】；
2. 步驟2：添加動(dòng)作：移動(dòng)；
3. 步驟3：選擇元件：【任務(wù)督辦】
4. 步驟4：選擇移動(dòng)類型：到達(dá)；
5. 步驟5：點(diǎn)擊：f(x);
6. 步驟6：點(diǎn)擊添加局部變量；
7. 步驟7：修改局部變量命名，修改為a；
8. 步驟8：選擇“元件”；
9. 步驟9：選擇元件為：【p1】；
10. 步驟10：點(diǎn)擊：插入變量或函數(shù)；
11. 步驟11：填寫變量公式；
12. 步驟12：點(diǎn)擊“確定”，完成x的設(shè)置；
13. 步驟13：重復(fù)第5/6/7/8/9/10/11/12，完成y的設(shè)置。

當(dāng)二級(jí)菜單收縮之后，其下面的菜單應(yīng)該往上進(jìn)行移動(dòng)。以【系統(tǒng)設(shè)置】為例，當(dāng)【p1】隱藏時(shí)，【任務(wù)督辦】的坐標(biāo)x應(yīng)該移動(dòng)至【系統(tǒng)設(shè)置】的左方，【任務(wù)督辦】的坐標(biāo)y應(yīng)該移動(dòng)至【系統(tǒng)設(shè)置】的下方；

相應(yīng)的操作同第（五）步，只不過在新建交互時(shí)，點(diǎn)擊“隱藏”。

重復(fù)第（五）、（六）步，完成【p2】的設(shè)置。由于【p3】下方?jīng)]有菜單，所以【p3】不用進(jìn)行設(shè)置。

當(dāng)【任務(wù)督辦】、【事務(wù)辦理】移動(dòng)后，其相應(yīng)的二級(jí)菜單【p2】、【p3】也應(yīng)該跟隨一起移動(dòng)。以【任務(wù)督辦】為例，【任務(wù)督辦】移動(dòng)時(shí)，設(shè)置【p2】跟隨即可。

1. 步驟1：選擇【任務(wù)督辦】，點(diǎn)擊【新建交互】，選擇【移動(dòng)時(shí)】；
2. 步驟2：選擇動(dòng)作：移動(dòng)；
3. 步驟3：選擇元件：【p2】；
4. 步驟4：選擇移動(dòng)類型：跟隨當(dāng)前元件。
5. 步驟5：點(diǎn)擊“確定”。

重復(fù)上述操作設(shè)置【事務(wù)辦理】。

完成上述操作后，基本實(shí)現(xiàn)了表單的靈活收縮和展開。但是我們發(fā)現(xiàn)，在點(diǎn)擊【系統(tǒng)設(shè)置】時(shí)，【事務(wù)辦理】沒有跟著一起移動(dòng)，這里需要對(duì)【p2】進(jìn)行設(shè)置，【p2】移動(dòng)時(shí)，【事務(wù)辦理】跟隨移動(dòng)。重復(fù)上一步，對(duì)【p2】進(jìn)行設(shè)置。

1. 步驟1：選擇【p2】，點(diǎn)擊【新建交互】，選擇【移動(dòng)時(shí)】；
2. 步驟2：選擇動(dòng)作：移動(dòng)；
3. 步驟3：選擇元件：【事務(wù)辦理】；
4. 步驟4：選擇移動(dòng)類型：跟隨當(dāng)前元件。
5. 步驟5：點(diǎn)擊“確定”。

本文由 @冰砂蜜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。