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

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

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

菜單的下拉與收起效果：

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

1.實例

1.從部件庫拉四個動態面板到操作區組合在一起

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

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

4. 雙擊“狀態2”編輯其狀態

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

6. 回到Home頁，目錄已經被編輯好。

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

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

9. 回到Home，則目錄一的用例1已近建立完畢，選擇更多事件，選擇更多事件，注意選擇動態面板調整大小以適應內容。

10. 選擇鼠標移出時，為實現收起效果。

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

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

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

14.目錄三和目錄四的狀態2也需要有相應的內容（頁面填充，如果沒有，那么在自適應內容的時候，會變為消失狀態），相關操作流程和目錄一一樣。

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

本文由 @Arthur 原創發布于人人都是產品經理。未經許可，禁止轉載。