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

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

菜單是整個網站都需要用到的，只用麻煩一次，其余時候直接從母版調用即可……廢話不多說，跟著我上車！

步驟1–繪制基本元件

如圖所示，先把菜單的元件準備好，默認但不限于：顏色、線條粗細、圓角、投影……

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

注意：我們要采用動態面板來制作，所以要準備兩種狀態下的元件。

步驟2–設置交互樣式

而樣式的設置包括初始樣式和交互樣式，一般PC端的元件可點擊狀態都是鼠標懸停出現顏色變化，所以我們一次性準備好。

注意：交互樣式可以直接復制。

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

用相同的方法改變箭頭的交互樣式，并且將矩形與箭頭進行打組鼠標右擊，選中：觸發內部元件鼠標交互樣式。

這樣一來，只要鼠標移入此組，則箭頭與矩形都可以出現鼠標懸停樣式。

步驟3–設置動態面板

如下圖所示，可以將我們準備好的兩組元件（收起/展開）放入一個動態面板里面，分成兩個狀態,將動態面板命名：菜單a。

步驟4–設置交互效果

我們對收起的一級菜單進行命令設置：鼠標點擊時-切換面板狀態-此面板（菜單a）到state 2 （展開）狀態。

我們對展開的一級菜單進行命令設置：鼠標點擊時-切換面板狀態-此面板（菜單a）到state 1 （收起）狀態。

步驟5–補充其他菜單

可以使用復制的方法補充其余的一級菜單，但是要注意：菜單內包含兩種狀態，需要將菜單名稱都做更換，切莫遺漏。

步驟6–設置移動區域

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

步驟7–設置移動距離

接下來，我們進入“一級標題a” 的面板，在收起狀態下添加命令：點擊時–移動–點擊a 下移–經過（0.90）。

疑問：為什么是0.90？

答：一級標題 a 下有3個二級菜單，且每個元件高度30 而菜單需要垂直移動，所以是0.90。

然后，在展開狀態下的菜單處添加命令：點擊時–移動–點擊a 下移–經過（0.-90）。

自此，菜單設置結束，而一級標題b,c,d都是這種制作方法。

本文由 @敗家女 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議