怎么制作動態效果的后臺導航欄呢，一起來文中看看~

先上完成效果：

整體的制作過程

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協議

總結

以上是生活随笔為你收集整理的bootstrap4 左侧导航栏 优秀 大气_制作动态效果的后台导航栏——左侧导航的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。