本次分享的的案例是Axure8.0製作的移入菜單（帶子菜單）效果。
預覽及下載地址：https://pwd3jh.axshare.com
一、製作原型
1、拖入一個矩形元件，設置寬度：100x，高度：45px，輸入內容：“移入菜單”，字體設置爲：微軟雅黑，顏色設置爲：#199ED8，在其上拖入一個動態面板，命名爲：三角旋轉。
設置“上”和“下”兩個狀態，“上”拖入一個矩形其形狀爲箭頭朝上的三角形，顏色設置爲：#FFFFFF，“下”拖入一個矩形其形狀爲箭頭朝下的三角形，顏色設置爲：#FFFFFF。
矩形元件和動態面板組合命名爲：導航欄1，如圖：
2、拖入一個矩形元件，設置寬度：100x，高度：179px，其邊框設置顏色爲：#199ED8，在其上拖入四個矩形元件，設置寬度：100x，高度：45px，分別輸入：菜單一、菜單二、菜單三、菜單四，在菜單四的矩形中加入一個動態面板，命名爲：三角旋轉。
設置“上”和“右”兩個狀態，“上”拖入一個矩形其形狀爲箭頭朝上的三角形，顏色設置爲：#199ED8，“右”拖入一個矩形其形狀爲箭頭朝右的三角形，顏色設置爲：#199ED8。
矩形元件和動態面板組合命名爲：導航欄2，如圖：
3、在”導航欄2“右邊拖入一個矩形元件，設置寬度：100x，高度：133px，其邊框設置顏色爲：#199ED8，在其上拖入三個矩形元件，設置寬度：100x，高度：45px，分別輸入：菜單一、菜單二、菜單三，在菜單三的矩形中加入一個動態面板，命名爲：三角旋轉。
設置“上”和“右”兩個狀態，“上”拖入一個矩形其形狀爲箭頭朝上的三角形，顏色設置爲：#199ED8，“右”拖入一個矩形其形狀爲箭頭朝右的三角形，顏色設置爲：#199ED8。
矩形元件和動態面板組合命名爲：導航欄3，如圖：
4、在“導航欄3”右邊拖入一個矩形元件，設置寬度：100x，高度：133px，其邊框設置顏色爲：#199ED8，在其上拖入三個矩形元件，設置寬度：100x，高度：45px，分別輸入：菜單一、菜單二、菜單三，其組合命名爲：子菜單並設爲隱藏狀態，如圖：
5、“導航欄3”與其右邊的子菜單組合命名爲：1，設置其隱藏狀態，“導航欄2”右邊的所有菜單組合一起命名爲：子菜單，設置爲隱藏狀態，”導航欄2“與右邊的子菜單組合命名爲：2，”導航欄1“下所有的菜單組合一起，命名爲：子菜單，設置其隱藏狀態，所有元件組合一起命名爲：3，
最終設計如圖：
二、交互設置
1、組合3進行”鼠標移入時“和”鼠標移出時“設置，如圖：
2、組合2進行“鼠標移入時”和“鼠標移出時”設置，如圖：
3、組合1進行“鼠標移入時”和“鼠標移出時”設置，如圖：
4、對每個菜單的“鼠標點擊時”進行設置，如圖：
所有設置完畢。