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

主要知識(shí)點(diǎn)：

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

問題：

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

核心思路：

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

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

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

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

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

當(dāng)合上子菜單時(shí)，就像這樣：

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

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

具體步驟：

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

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

3. 處理第一個(gè)父菜單A，添加事件，鼠標(biāo)單擊時(shí)切換動(dòng)態(tài)面板p1的可見性

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

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

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

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

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

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

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

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

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

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

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

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

哈哈，對(duì)你有用的話別忘記點(diǎn)贊哦~需要原型的可以私我。^_^

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

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