本次教各位小伙伴制作折疊菜單，這次的做法比較簡(jiǎn)單，大家都可以輕松的學(xué)會(huì)。

下面開(kāi)始制作原型 ~

一、準(zhǔn)備元件

1. 打開(kāi) Axure 新建文件，拉出一個(gè)矩形，w 為 200 px，h 為 40 px，色值為 #333333，在矩形內(nèi)輸入“一級(jí)菜單”，然后命名為“一級(jí)菜單”；
2. 拖進(jìn)一個(gè)矩形，同樣 w 為 200 px ，h 為 40 px ，色值改為 #FFFFFF（ 純白色 ），在矩形內(nèi)輸入“選項(xiàng)一”；
3. 把“選項(xiàng)一” 在復(fù)制兩個(gè)出來(lái)，分別叫“選項(xiàng)二 ”、“選項(xiàng)三” 。

完成了以上動(dòng)作，就可以得到一下的展示，看圖：

好了，完成之后我們就來(lái)開(kāi)始做第二步 ~

二、設(shè)置交互樣式

（1）全選“選項(xiàng)一、二、三 ”，右鍵點(diǎn)擊 交互樣式設(shè)置 ，選擇鼠標(biāo)懸停 – 填充顏色 – 色值為 #F2F2F2 、然后再選 選中 – 填充顏色 – 色值 #E4E4E4 。

如圖：

（2）繼續(xù)選中“選項(xiàng)一、二、三 ”，右鍵點(diǎn)擊設(shè)置選項(xiàng)組名稱 ，命名為“選項(xiàng)”、選擇“選項(xiàng)一”右鍵點(diǎn)擊 選中（ 默認(rèn)選中 ），完成 。

完成了以上的設(shè)置，繼續(xù)下一步 ~

三、設(shè)置交互用例

（1）選擇“選項(xiàng)一 ”，設(shè)置鼠標(biāo)點(diǎn)擊時(shí) – 選中 – 選擇 This 為 ture ，點(diǎn)擊確定。（ 選項(xiàng)二、三同上設(shè)置，復(fù)制粘貼過(guò)去即可 ）。

完成以上設(shè)置，我們的選項(xiàng)就可以點(diǎn)擊切換了，看效果：

（2）把 “選項(xiàng)一、二、三 ” 選中，右鍵點(diǎn)擊 轉(zhuǎn)換為動(dòng)態(tài)面板，命名為 “選項(xiàng) ” ，點(diǎn)擊把該面板隱藏。

（3）設(shè)置“一級(jí)菜單 ” ，設(shè)置鼠標(biāo)單擊時(shí) – 設(shè)置面板狀態(tài) – 可見(jiàn)性：切換 、 動(dòng)畫：顯示時(shí)向下 / 隱藏時(shí)向上，動(dòng)畫為：線性，250 毫秒 、 勾上置于頂層 、 勾上推動(dòng)元件，方向?yàn)橄路?，?dòng)畫為：線性，250毫秒。

這樣就完成了，為了防止大家設(shè)置錯(cuò)誤，下面放一張?jiān)O(shè)置的圖：

再附一張效果圖：

完成以上的制作，我們會(huì)看到了這只是單個(gè)菜單而已，我們可以給它復(fù)制多個(gè)折疊菜單在一起。

四、進(jìn)階

（1）全選所有元件、動(dòng)態(tài)面板 – 右鍵點(diǎn)擊組合，然后我們給它復(fù)制粘貼 n 個(gè)，按照以下方式排列：

（2）因前面用戶設(shè)置的時(shí)候，我們已經(jīng)把 “推動(dòng)元件 ” 設(shè)置好了 ，所以后面無(wú)需再設(shè)置。但前面所做的，我們把 “選項(xiàng)一 ” 設(shè)置為默認(rèn)選中狀態(tài)，這里我們又復(fù)制了兩個(gè)，所以我們需要把多復(fù)制出來(lái)的兩個(gè) “選項(xiàng)一 ”去掉默認(rèn)選中狀態(tài) 。

設(shè)置完，繼續(xù)看效果：

百度云鏈接：https://pan.baidu.com/s/1Axn4oFEmWkhsNtdfPlKrlA 密碼:89j0

到這里就完成所有制作了，如有相關(guān)問(wèn)題請(qǐng)?jiān)谙路搅粞裕x謝大家觀看。

注：以上部分內(nèi)容是經(jīng)過(guò)我們的 Phoenix 老師的指導(dǎo)完成的（ 其實(shí)就是大半夜兩個(gè)夜貓子在群里討論效果該如何實(shí)現(xiàn)比較好，哈哈哈 ），在這里為 Phoenix 老師的敬業(yè)點(diǎn)個(gè)贊。

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

題圖來(lái)自Unsplash，基于CC0協(xié)議