建立一個選單時往往會附帶多個子選單，這樣的效果如何達成呢？本文作者示範瞭如何用Axure製作移入選單效果，希望對你有幫助。

本次分享的的案例是Axure8。0製作的移入選單（帶子選單）效果。

一、製作原型

1、拖入一個矩形元件，設定寬度：100x，高度：45px，輸入內容：“移入選單”，字型設定為：微軟雅黑，顏色設定為：#199ED8，在其上拖入一個動態面板，命名為：三角旋轉。

設定“上”和“下”兩個狀態，“上”拖入一個矩形其形狀為箭頭朝上的三角形，顏色設定為：#FFFFFF，“下”拖入一個矩形其形狀為箭頭朝下的三角形，顏色設定為：#FFFFFF。

矩形元件和動態面板組合命名為：導航欄1，如圖：

2、拖入一個矩形元件，設定寬度：100x，高度：179px，其邊框設定顏色為：#199ED8，在其上拖入四個矩形元件，設定寬度：100x，高度：45px，分別輸入：選單一、選單二、選單三、選單四，在選單四的矩形中加入一個動態面板，命名為：三角旋轉。

設定“上”和“右”兩個狀態，“上”拖入一個矩形其形狀為箭頭朝上的三角形，顏色設定為：#199ED8，“右”拖入一個矩形其形狀為箭頭朝右的三角形，顏色設定為：#199ED8。

矩形元件和動態面板組合命名為：導航欄2，如圖：

3、在”導航欄2“右邊拖入一個矩形元件，設定寬度：100x，高度：133px，其邊框設定顏色為：#199ED8，在其上拖入三個矩形元件，設定寬度：100x，高度：45px，分別輸入：選單一、選單二、選單三，在選單三的矩形中加入一個動態面板，命名為：三角旋轉。

矩形元件和動態面板組合命名為：導航欄3，如圖：

4、在“導航欄3”右邊拖入一個矩形元件，設定寬度：100x，高度：133px，其邊框設定顏色為：#199ED8，在其上拖入三個矩形元件，設定寬度：100x，高度：45px，分別輸入：選單一、選單二、選單三，其組合命名為：子選單並設為隱藏狀態，如圖：

5、“導航欄3”與其右邊的子選單組合命名為：

設定其隱藏狀態，“導航欄2”右邊的所有選單組合一起命名為：子選單，設定為隱藏狀態，“導航欄2”與右邊的子選單組合命名為：

“導航欄1”下所有的選單組合一起，命名為：子選單，設定其隱藏狀態，所有元件組合一起命名為：

最終設計如圖：

二、互動設定

1、組合3進行”滑鼠移入時“和”滑鼠移出時“設定，如圖：

2、組合2進行“滑鼠移入時”和“滑鼠移出時”設定，如圖：

3、組合1進行“滑鼠移入時”和“滑鼠移出時”設定，如圖：

4、對每個選單的“滑鼠點選時”進行設定，如圖：

所有設定完畢。

本文由@qianqianlu 原創釋出於人人都是產品經理，未經許可，禁止轉載。

題圖來自 unsplash，基於 CC0 協議。

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。