建立一個菜單時往往會附帶多個子菜單，這樣的效果如何達成呢？本文作者示範了如何用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 協議。

該文觀點僅代表作者本人，人人都是産品經理平台僅提供信息存儲空間服務。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部