編輯導語：制作動态菜單時，如果菜單元件較多，依靠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 協議

,

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

查看全部