實現(xiàn)后的效果是下面這樣的：

這個做法：其實很簡單：用動態(tài)面板的方法.現(xiàn)在一步步截圖給大家：

做一個基礎(chǔ)的，先做好左邊大的分類（上圖 3）

做一個詳細分類的動態(tài)面板。（上圖4）

動態(tài)面板含4種狀態(tài)（上圖5）

服飾鞋包（上圖6）

美容護膚（上圖7）

運動戶外（上圖8）

家具用品（上圖9）

如果你要問我，那個形狀是怎樣形成的，用矩形。實在不行就用直線。

用這種加直線的方式可以組合（上圖10）

下面我們來看下邏輯

鼠標移入某個分類，就讓某個分類的詳細分類顯示出來，所以我們將詳細分類的（4個狀態(tài)）動態(tài)面板覆蓋在上面，并隱藏。如下圖步驟：

1、設(shè)置每個大分類的交互，即鼠標移入某個大分類，就顯示這個大分類的小分類（動態(tài)面板對應(yīng)的狀態(tài)），然后等待多長時間后，自動隱藏小分類（動態(tài)面板）

詳細的交互，以服飾鞋包為例（上圖11 ? 12其它分類，也同樣的方法添加同樣的交互）

將我們之前做好的動態(tài)面板，覆蓋分類上面，并隱藏。

隱藏是黃色的（上圖13）

這樣能運行就實現(xiàn)啦！試試看吧！

本文由 @Suha 原創(chuàng)投稿，并經(jīng)人人都是產(chǎn)品經(jīng)理編輯。未經(jīng)許可，禁止轉(zhuǎn)載。