當初自己想了很久才實現(xiàn)了這種左側(cè)的動態(tài)菜單欄。今天我跟大家分享一下怎么實現(xiàn)點擊實現(xiàn)動態(tài)開合的那種左側(cè)菜單欄。希望能幫助到一些剛?cè)腴T的朋友們。

主要知識點：

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

問題：

想實現(xiàn)一個如下圖一樣的左側(cè)動態(tài)菜單欄

核心思路：

菜單的開合怎么實現(xiàn)？

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

菜單合的時候下級父菜單上移怎么實現(xiàn)？

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

“開始開發(fā)”移到了“規(guī)則中心”的子菜單集下面，而子菜單集是一個動態(tài)面板，即將“開始開發(fā)”移動動態(tài)面板下，這里可以用移動到絕對位置實現(xiàn)，x軸方向?qū)ⅰ伴_始開發(fā)”移到動態(tài)面板的left，y軸方向?qū)ⅰ伴_始開發(fā)”移到動態(tài)面板的bottom。

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

同理，合上時隱藏動態(tài)面板，x軸方向?qū)ⅰ伴_始開發(fā)”移到動態(tài)面板的left，y軸方向?qū)ⅰ伴_始開發(fā)”移到動態(tài)面板的top。

這樣既可實現(xiàn)動態(tài)移動的效果。

具體步驟：

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

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

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

同理設(shè)置父菜單B鼠標單擊時切換動態(tài)面板p2的可見性，父菜單C鼠標單擊時切換動態(tài)面板p3的可見性

按F8預(yù)覽后可以發(fā)現(xiàn)，我們已經(jīng)實現(xiàn)了點擊父菜單控制子菜單的開合，但是沒有我們常見的那種動態(tài)效果。

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

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

6.同理，設(shè)置好p2

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

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

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

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

8.按F8預(yù)覽可以發(fā)現(xiàn)，當A的子菜單合并時，B與B的子菜單已經(jīng)實現(xiàn)跟隨移動，但C與C的子菜單并未移動。如下圖：

這里增加設(shè)置C跟隨B移動即可：

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

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

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

本文由 @淺若伊淚 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。