建立一個(gè)菜單時(shí)往往會(huì)附帶多個(gè)子菜單，這樣的效果如何達(dá)成呢？本文作者示范了如何用Axure制作移入菜單效果，希望對(duì)你有幫助。

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

021yin.com

一、制作原型

1、拖入一個(gè)矩形元件，設(shè)置寬度：100x，高度：4*px，輸入內(nèi)容：“移入菜單”，字體設(shè)置為：微軟雅黑，顏色設(shè)置為：#1**ED8，在其上拖入一個(gè)動(dòng)態(tài)面板，命名為：三角旋轉(zhuǎn)。

設(shè)置“上”和“下”兩個(gè)狀態(tài)，“上”拖入一個(gè)矩形其形狀為箭頭朝上的三角形，顏色設(shè)置為：#FFFFFF，“下”拖入一個(gè)矩形其形狀為箭頭朝下的三角形，顏色設(shè)置為：#FFFFFF。

矩形元件和動(dòng)態(tài)面板組合命名為：導(dǎo)航欄1，如圖：

2、拖入一個(gè)矩形元件，設(shè)置寬度：100x，高度：1**px，其邊框設(shè)置顏色為：#1**ED8，在其上拖入四個(gè)矩形元件，設(shè)置寬度：100x，高度：4*px，分別輸入：菜單一、菜單二、菜單三、菜單四，在菜單四的矩形中加入一個(gè)動(dòng)態(tài)面板，命名為：三角旋轉(zhuǎn)。

設(shè)置“上”和“右”兩個(gè)狀態(tài)，“上”拖入一個(gè)矩形其形狀為箭頭朝上的三角形，顏色設(shè)置為：#1**ED8，“右”拖入一個(gè)矩形其形狀為箭頭朝右的三角形，顏色設(shè)置為：#1**ED8。

矩形元件和動(dòng)態(tài)面板組合命名為：導(dǎo)航欄2，如圖：

*、在”導(dǎo)航欄2“右邊拖入一個(gè)矩形元件，設(shè)置寬度：100x，高度：1**px，其邊框設(shè)置顏色為：#1**ED8，在其上拖入三個(gè)矩形元件，設(shè)置寬度：100x，高度：4*px，分別輸入：菜單一、菜單二、菜單三，在菜單三的矩形中加入一個(gè)動(dòng)態(tài)面板，命名為：三角旋轉(zhuǎn)。

設(shè)置“上”和“右”兩個(gè)狀態(tài)，“上”拖入一個(gè)矩形其形狀為箭頭朝上的三角形，顏色設(shè)置為：#1**ED8，“右”拖入一個(gè)矩形其形狀為箭頭朝右的三角形，顏色設(shè)置為：#1**ED8。

矩形元件和動(dòng)態(tài)面板組合命名為：導(dǎo)航欄*，如圖：

4、在“導(dǎo)航欄*”右邊拖入一個(gè)矩形元件，設(shè)置寬度：100x，高度：1**px，其邊框設(shè)置顏色為：#1**ED8，在其上拖入三個(gè)矩形元件，設(shè)置寬度：100x，高度：4*px，分別輸入：菜單一、菜單二、菜單三，其組合命名為：子菜單并設(shè)為隱藏狀態(tài)，如圖：

*、“導(dǎo)航欄*”與其右邊的子菜單組合命名為：

設(shè)置其隱藏狀態(tài)，“導(dǎo)航欄2”右邊的所有菜單組合一起命名為：子菜單，設(shè)置為隱藏狀態(tài)，“導(dǎo)航欄2”與右邊的子菜單組合命名為：

“導(dǎo)航欄1”下所有的菜單組合一起，命名為：子菜單，設(shè)置其隱藏狀態(tài)，所有元件組合一起命名為：

最終設(shè)計(jì)如圖：

二、交互設(shè)置

1、組合*進(jìn)行”鼠標(biāo)移入時(shí)“和”鼠標(biāo)移出時(shí)“設(shè)置，如圖：

2、組合2進(jìn)行“鼠標(biāo)移入時(shí)”和“鼠標(biāo)移出時(shí)”設(shè)置，如圖：

*、組合1進(jìn)行“鼠標(biāo)移入時(shí)”和“鼠標(biāo)移出時(shí)”設(shè)置，如圖：

4、對(duì)每個(gè)菜單的“鼠標(biāo)點(diǎn)擊時(shí)”進(jìn)行設(shè)置，如圖：

所有設(shè)置完畢。

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

題圖來自 unsplash，基于 CC0 協(xié)議。