起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識制作動態效果的后臺導航欄——左側導航
怎么制作動態效果的后臺導航欄呢，一起來文中看看~
先上完成效果：
整體的制作過程
1. 制作菜單元件
分別制作導航菜單中的每個元件，制作好一個以后，就可以復用了，制作步驟如下：
- 使用矩形，制作單個導航菜單的底層
- 使用圖片，制作導航菜單的圖標
- 使用矩形，設置成三角形，制作導航菜單的二級菜單的顯示隱藏標識
制作三角形的步驟：選擇矩形，右鍵選擇彈出來的菜單中的——變換形狀，選擇三角形。
2. 制作菜單
將制作好的菜單元件組合成一個整體的導航菜單元件
（1）改變三角形的大小為16*16
（2）分別制作：一級無下級菜單，一級有下級的菜單，二級菜單
（3）組合菜單，以制作一級有下級的菜單為例：選中圖片、三角形、矩形、右鍵、彈出菜單、選擇組合。（一級無下級菜單同樣操作組合）
（4）制作二級菜單動態效果，選中二級菜單，在交互中，添加選中效果，設置選中后的背景顏色變更為#19a2dd。添加交互：單擊時——設置選中——當前文件。重點，重點，給二級菜單設置選項組team2（選項組名字自定義）。
（5）制作一級菜單動態效果。給一級菜單組中的三角形添加一個名字：sanjiao（這個名字可以自定義）。選中一級菜單組，在交互中，添加交互：單擊時——旋轉——sanjiao——順時針——過——180°。
重點，重點，給一級菜單設置選項組team1（選項組名稱自定義）
3. 制作導航欄底層元件（這個沒什么好說的，直接看圖）
4. 制作導航菜單
自由組合一級，二級菜單，如圖。組合時，一定要確保每個菜單中的距離大于等于0，千萬不能小于0，注意，注意，注意。
（1）將財務管理下的四個二級菜單選中，右鍵彈出菜單，選擇轉換為動態面板，并設置動態面板名稱（財務管理，這里可以自定義設置）。人員管理，系統設置如法炮制。
（2）給一級菜單的單擊時的交互添加動作。以財務管理為例：添加顯示/隱藏（交互），目標選擇動態面板財務管理，選擇切換；顯示動畫選擇向下滑動——300毫秒，隱藏動畫選擇向上滑動——300毫秒；重點，重點，重點，更多選項中，選擇推動和拉動元件——下方——線性——300毫秒。人員管理，系統設置如法炮制。
最后，把菜單捏在一起，OK了。大功告成，可以自己玩玩了。
本文由 @大王 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
我按照這個做了，加了一個地方，就是點擊跳轉到相應的頁面。在點擊時，選中的菜單欄會變一下藍色，跳轉到相應的頁面后就還是原來的顏色。請問這個如何處理？
多個三級下拉 的，第一個三級三級菜單下拉的時候，第二個三級菜單組件不會向下推動https://wgk51k.axshare.com
抱歉，當我設置三級菜單的時候出現了和你一樣的問題。目前只能做到笨處理，隱藏和顯示三級菜單時，控制二級菜單的高度以及其它菜單的位置進行控制。等有更優的解決方案時，會第一時間告知。
謝謝
哇哇哇哇，求原型文件546854530@qq.com
用中繼器也可以做，沒這么麻煩，
謝謝您的提議，回頭可以試試。
條條道路通羅馬，做功能的時候，可以根據需求，不同的方法做相同的功能。