當初自己想了很久才實現了這種左側的動態菜單欄。今天我跟大家分享一下怎么實現點擊實現動態開合的那種左側菜單欄。希望能幫助到一些剛入門的朋友們。

主要知識點：

1. 通過顯示/隱藏實現子菜單的開合
2. 通過移動控制菜單間的跟隨移動，實現動態效果

問題：

想實現一個如下圖一樣的左側動態菜單欄

核心思路：

菜單的開合怎么實現？

答：可以通過動態面板的顯示/隱藏實現開合，每級父菜單下的子菜單集放在一個動態面板里，點擊父菜單切換動態面板的可見性，從而實現菜單的開合。

菜單合的時候下級父菜單上移怎么實現？

答：初始狀態子菜單都是合起來的，父菜單由上向下排列。點擊第一個父菜單，其子菜單展開，第二個父菜單下移到第一個父菜單的子菜單級下面，就像這樣：

“開始開發”移到了“規則中心”的子菜單集下面，而子菜單集是一個動態面板，即將“開始開發”移動動態面板下，這里可以用移動到絕對位置實現，x軸方向將“開始開發”移到動態面板的left，y軸方向將“開始開發”移到動態面板的bottom。

當合上子菜單時，就像這樣：

同理，合上時隱藏動態面板，x軸方向將“開始開發”移到動態面板的left，y軸方向將“開始開發”移到動態面板的top。

這樣既可實現動態移動的效果。

具體步驟：

1. 在主面板上畫出如下幾個矩形，排列好，命名好，父菜單分別命名為ra、rb、rc

2. 將子菜單轉化為動態面板，另兩個子菜單們類似處理，并分別命名為：p1、p2、p3

3. 處理第一個父菜單A，添加事件，鼠標單擊時切換動態面板p1的可見性

同理設置父菜單B鼠標單擊時切換動態面板p2的可見性，父菜單C鼠標單擊時切換動態面板p3的可見性

按F8預覽后可以發現，我們已經實現了點擊父菜單控制子菜單的開合，但是沒有我們常見的那種動態效果。

5.接下來：當子菜p1合起來（隱藏）的時候，父菜單B在x軸方向移動到p1的左側，在y軸方向移動到p1的頂部。

當子菜單p1打開（顯示）的時候，父菜單B在x軸方向移動到p1的左側，在y軸方向移動到p1的底部。

6.同理，設置好p2

當子菜單p2合起來（隱藏）的時候，父菜單C在x軸方向移動到p2的左側，在y軸方向移動到p2的頂部。

當子菜單p2打開（顯示）的時候，父菜單C在x軸方向移動到p2的左側，在y軸方向移動到p2的底部。

這樣我們的父菜單的動態變化就正確了。但是父菜單下的子菜單變化不正確，當父菜單上移時，其子菜單仍然在原地不動，就像這樣：

7. 這時我們再設置該父菜單下的子菜單（即動態面板）跟隨父菜單移動，p1的父菜單A是頂級菜單，不會移動，所以設置p2跟隨B移動、p3跟隨C移動即可。

8.按F8預覽可以發現，當A的子菜單合并時，B與B的子菜單已經實現跟隨移動，但C與C的子菜單并未移動。如下圖：

這里增加設置C跟隨B移動即可：

9.至此，這個簡單的左側動態菜單就實現啦。也可以給矩形做一下簡單的顏色處理，為了美觀。就像這樣：

哈哈，對你有用的話別忘記點贊哦~需要原型的可以私我。^_^

作者：淺若伊淚，產品界的小白。我在找到自己的路上^_^。

本文由 @淺若伊淚 原創發布于人人都是產品經理。未經許可，禁止轉載。