編輯導(dǎo)語：制作動(dòng)態(tài)菜單時(shí)，如果菜單元件較多，依靠axure自帶的“推動(dòng)元件”可能會(huì)出現(xiàn)錯(cuò)位的情況。本文作者分享了采用動(dòng)態(tài)面板和位移的方式完成動(dòng)態(tài)菜單制作的方法，感興趣的小伙伴們一起來看一下吧。

想必有很多同伴和我剛開始一樣用“顯示-推動(dòng)下方元件”來制作動(dòng)態(tài)菜單，但是遇到菜單元件較多時(shí)靠著axure自帶的“推動(dòng)元件”總是會(huì)出現(xiàn)錯(cuò)位的情況，所以，我便改了方案采用動(dòng)態(tài)面板和位移的方式來完成。

菜單是整個(gè)網(wǎng)站都需要用到的，只用麻煩一次，其余時(shí)候直接從母版調(diào)用即可……廢話不多說，跟著我上車！

步驟1–繪制基本元件

如圖所示，先把菜單的元件準(zhǔn)備好，默認(rèn)但不限于：顏色、線條粗細(xì)、圓角、投影……

繪制元件規(guī)則：盡量采用較少的元件，如上圖，我是直接在矩形內(nèi)寫的文字，并且可以將線段可見性全部隱藏讓他更加美觀。

注意：我們要采用動(dòng)態(tài)面板來制作，所以要準(zhǔn)備兩種狀態(tài)下的元件。

步驟2–設(shè)置交互樣式

而樣式的設(shè)置包括初始樣式和交互樣式，一般PC端的元件可點(diǎn)擊狀態(tài)都是鼠標(biāo)懸停出現(xiàn)顏色變化，所以我們一次性準(zhǔn)備好。

注意：交互樣式可以直接復(fù)制。

在這時(shí)候用矩形元件的好處就可以凸顯出來了，我們可以直接在“鼠標(biāo)經(jīng)過”樣式中改變一些參數(shù)，這里我改變的是填充色和文字顏色。

用相同的方法改變箭頭的交互樣式，并且將矩形與箭頭進(jìn)行打組鼠標(biāo)右擊，選中：觸發(fā)內(nèi)部元件鼠標(biāo)交互樣式。

這樣一來，只要鼠標(biāo)移入此組，則箭頭與矩形都可以出現(xiàn)鼠標(biāo)懸停樣式。

步驟3–設(shè)置動(dòng)態(tài)面板

如下圖所示，可以將我們準(zhǔn)備好的兩組元件（收起/展開）放入一個(gè)動(dòng)態(tài)面板里面，分成兩個(gè)狀態(tài),將動(dòng)態(tài)面板命名：菜單a。

步驟4–設(shè)置交互效果

我們對(duì)收起的一級(jí)菜單進(jìn)行命令設(shè)置：鼠標(biāo)點(diǎn)擊時(shí)-切換面板狀態(tài)-此面板（菜單a）到state 2 （展開）狀態(tài)。

我們對(duì)展開的一級(jí)菜單進(jìn)行命令設(shè)置：鼠標(biāo)點(diǎn)擊時(shí)-切換面板狀態(tài)-此面板（菜單a）到state 1 （收起）狀態(tài)。

步驟5–補(bǔ)充其他菜單

可以使用復(fù)制的方法補(bǔ)充其余的一級(jí)菜單，但是要注意：菜單內(nèi)包含兩種狀態(tài)，需要將菜單名稱都做更換，切莫遺漏。

步驟6–設(shè)置移動(dòng)區(qū)域

點(diǎn)擊菜單會(huì)導(dǎo)致面板變化（當(dāng)前菜單展開，其余菜單下移）那么我們將需要展開下的菜單進(jìn)行打組，且命名。比如，“一級(jí)標(biāo)題 a” 有二級(jí)菜單，其他菜單需要下移，則將剩下的 b/c/d 進(jìn)行大組。

步驟7–設(shè)置移動(dòng)距離

接下來，我們進(jìn)入“一級(jí)標(biāo)題a” 的面板，在收起狀態(tài)下添加命令：點(diǎn)擊時(shí)–移動(dòng)–點(diǎn)擊a 下移–經(jīng)過（0.90）。

疑問：為什么是0.90？

答：一級(jí)標(biāo)題 a 下有3個(gè)二級(jí)菜單，且每個(gè)元件高度30 而菜單需要垂直移動(dòng)，所以是0.90。

然后，在展開狀態(tài)下的菜單處添加命令：點(diǎn)擊時(shí)–移動(dòng)–點(diǎn)擊a 下移–經(jīng)過（0.-90）。

自此，菜單設(shè)置結(jié)束，而一級(jí)標(biāo)題b,c,d都是這種制作方法。

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

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