作為剛做產(chǎn)品的小白，我網(wǎng)上查過很多有關(guān)抽屜菜單的實現(xiàn)方式，但是都沒有說到選中效果的實現(xiàn)，然后我通過同學(xué)發(fā)我的原型模板，知道了他的實現(xiàn)，現(xiàn)在做下總結(jié)。

1、先將整個的背景顏色調(diào)為淺灰色，之后拉入一個動態(tài)面板，并調(diào)整自己想要的大小尺寸，在屬性設(shè)置中將動態(tài)面板設(shè)置為自動調(diào)整為內(nèi)容尺寸，然后雙擊該動態(tài)面板，將該動態(tài)面板命名為“菜單1”，再添加一個狀態(tài)，分別命名為收起和展開。

2、點擊收起，拉入一個矩形，將尺寸設(shè)置為動態(tài)面板尺寸后，把矩形命名為“菜單1收起”并設(shè)置文字為菜單1，把填充顏色設(shè)為白色，拉入一個下拉箭頭的圖片，調(diào)整尺寸，將兩個元件進(jìn)行組合，勾選組合的允許觸發(fā)鼠標(biāo)交互。

3、添加“菜單1收起”的鼠標(biāo)懸停和選中的交互樣式，分別把字體顏色為藍(lán)色，填充顏色為淺灰色。

4、為“菜單1收起”添加鼠標(biāo)點擊的用例，將面板狀態(tài)設(shè)置為展開，并選中推動/拉動元件。

5、將“菜單1收起”內(nèi)容復(fù)制到動態(tài)面板的展開狀態(tài)頁面，把下拉圖片換成上拉，將矩形的名稱改為“菜單1展開”，同時將鼠標(biāo)點擊的交互的面板狀態(tài)設(shè)為收起。

6、將“菜單1展開”復(fù)制，粘貼一次作為子菜單并對應(yīng)修改名稱和文字為子菜單1（注意復(fù)制的時候不要復(fù)制到了組合），修改鼠標(biāo)的點擊用例，選中當(dāng)前元件。

7、復(fù)制粘貼子菜單，然后分別修改對應(yīng)的名稱和文字。

這樣整個動態(tài)面板的設(shè)置就完成拉，這僅僅只是一個菜單，我們可以將該動態(tài)面板多復(fù)制粘貼幾次，這樣就能形成多個菜單了。

經(jīng)過預(yù)覽，發(fā)現(xiàn)還有一個問題——那就是點擊一個子菜單之后再點擊一個子菜單，發(fā)現(xiàn)兩個子菜單都是選中狀態(tài)，這時候我們就需要進(jìn)行接下來的步驟進(jìn)行完善他。

8、隨便拉入一個原件，將名稱命名為輔助且背景填充的透明度改為透明，添加隱藏用例，將所有的子菜單的選中狀態(tài)都設(shè)為未選中。

9、修改所有的子菜單的鼠標(biāo)點擊用例，先隱藏輔助視圖，然后再設(shè)置當(dāng)前元件的選中狀態(tài)，最后顯示輔助視圖（如果一開始就知道有這一步，可以先添加輔助視圖，然后直接在步驟6的時候直接設(shè)置對應(yīng)的用例，就不用后期一個個子菜單進(jìn)行修改）。

再預(yù)覽一次，現(xiàn)在就顯示沒有問題啦。

不過這個還可以再優(yōu)化一下，就是比如說：我選中了子菜單后，將菜單收起，就看不到對應(yīng)選中的子菜單在什么位置了，所以在子菜單鼠標(biāo)點擊用例的時候可以將對應(yīng)所在的“菜單收起”設(shè)置為選中，然后再輔助視圖的隱藏用例中再添加“菜單收起”的選中狀態(tài)設(shè)為未選中。

這樣就徹底完成啦。

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

題圖來自Unsplash，基于CC0協(xié)議