本文主要目的是教會小白使用動態(tài)面板實現(xiàn)菜單的下拉與收回操作，用動態(tài)面板的多狀態(tài)切換來實現(xiàn)菜單的下拉與收起。

動態(tài)面板是Axure RP 8中的一款高級組件，在隱藏與顯示、滑動效果 、拖動效果、多狀態(tài)效果切換等操作的場景中，動態(tài)面板是你的不二選擇。

完成后效果如下圖，該例子主要依靠動態(tài)面板的狀態(tài)切換來實現(xiàn)菜單狀態(tài)的下拉與收起，在后臺管理系統(tǒng)中普遍運用到。

菜單的下拉與收起效果：

希望大家邊學邊做，以下是用Axure RP8 實現(xiàn)菜單實例。

1.實例

1.從部件庫拉四個動態(tài)面板到操作區(qū)組合在一起

2. 雙擊選中動態(tài)面板，命名面板名稱并且添加兩個狀態(tài)，分別命名為“狀態(tài)1”與“狀態(tài)2”.

3. 雙擊“狀態(tài)1”，添加矩形并且命名為目錄一

4. 雙擊“狀態(tài)2”編輯其狀態(tài)

5. 復制狀態(tài)1的矩形并且添加三個矩形作為子目錄，并且分別命名為“子目錄1，2 , 3”。

6. 回到Home頁，目錄已經(jīng)被編輯好。

7. 按照編輯動態(tài)面板1的步驟把下面三個面板依次命名，接下來為目錄一添加用例。

8. 按照圖中操作依次實現(xiàn)的效果為：單擊目錄一時會由狀態(tài)1變展開成狀態(tài)2。

9. 回到Home，則目錄一的用例1已近建立完畢，選擇更多事件，選擇更多事件，注意選擇動態(tài)面板調(diào)整大小以適應(yīng)內(nèi)容。

10. 選擇鼠標移出時，為實現(xiàn)收起效果。

11. 按照圖中操作依次實現(xiàn)的效果為：鼠標移開目錄一時，會由狀態(tài)2變展開成狀態(tài)1。

12. 目錄一的下拉與收起用例都已近創(chuàng)建完畢。

13. 按照目錄一的方法創(chuàng)建目錄二的下拉和收起用例，并且添加目錄二的狀態(tài)2.

14.目錄三和目錄四的狀態(tài)2也需要有相應(yīng)的內(nèi)容（頁面填充，如果沒有，那么在自適應(yīng)內(nèi)容的時候，會變?yōu)橄顟B(tài)），相關(guān)操作流程和目錄一一樣。

15. 點擊右上角預覽，單機目錄一，子目錄展現(xiàn)，移開鼠標子目錄收回。

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