可伸縮的全局導(dǎo)航可以幫助用戶尋找到感興趣的類目，鼠標(biāo)在一級分類上懸停，一級分類下的二級和三級分類就會顯示出來，結(jié)束懸停時，二級和三級分類就會收縮起來。

話不多說，立馬開始分享：

首先，我們將導(dǎo)航分為兩個區(qū)域，A區(qū)域是正常情況下顯示出來的區(qū)域，B區(qū)域是鼠標(biāo)懸停以后顯示出來的區(qū)域。當(dāng)鼠標(biāo)在A區(qū)域懸停的時候，A區(qū)域背景會變深，同時B區(qū)域的內(nèi)容出現(xiàn)并且可以點擊；當(dāng)鼠標(biāo)從A和B的非共同邊界移出時，A區(qū)域顏色回到正常情況下的顏色，同時B區(qū)域隱藏。

一、新建A區(qū)域動態(tài)面板

（1）拖拽一個動態(tài)面板部件到頁面中，命名為 A1。

（2）將 A1 動態(tài)面板 state1 的名稱修改為 常態(tài) ，在 常態(tài) 狀態(tài)中拖拽一個與A1面板相同大小的矩形部件（A1常態(tài)矩形），顏色自定義。

（3）為 A1 新建一個狀態(tài)為 變換，同在 變換 狀態(tài)中添加一個與A1面板相同大小矩形部件（A1變換矩形），顏色比A1常態(tài)矩形的顏色深一些。

二、新建B區(qū)域動態(tài)面板

（1）再拖拽一個動態(tài)面板部件到頁面中，命名為 B1（B1與A1右上角對齊）。

（2）B1 動態(tài)面板 state1 的名稱修改為 狀態(tài)1? ，在 狀態(tài)1 中拖拽一個與B1面板相同大小的矩形部件（B1矩形），顏色與?A1變換矩形相同。

（3）回到首頁中，右擊B1面板，將它設(shè)置為隱藏。

設(shè)置完效果如下：

三、給面板添加事件

（1）找到 A1 面板的 常態(tài) 狀態(tài)中的矩形部件，在這個矩形的 鼠標(biāo)懸停 事件中，做兩個動作：

• 將B區(qū)域的B1面板顯示出來；
• 將A1面板的狀態(tài)修改為深色背景的變換狀態(tài)。

（2）為 B1 面板的 狀態(tài)1 中的矩形部件添加一個鼠標(biāo)移出事件，做兩個動作：①先隱藏B1面板；②再將A1面板的狀態(tài)恢復(fù)為常態(tài)。

（3）為 A1 面板的 變換 狀態(tài)中的矩形部件添加一個鼠標(biāo)移入事件，做一個動作：將B1設(shè)置為可見。

四、添加文字

拖拽一個矩形部件到 A1 常態(tài) 狀態(tài)中，雙擊輸入相應(yīng)文字并將矩形填色和邊框都設(shè)置為無。

右擊這個矩形，選擇交互樣式，在鼠標(biāo)懸停中勾選下劃線。

把矩形的外尺寸調(diào)整得跟矩形當(dāng)中的文字外尺寸差不多，并且在 A1 的常態(tài)和變換狀態(tài)都放上這個矩形。

同理，在 B1?拖拽一個矩形部件到 狀態(tài)1 中，雙擊輸入相應(yīng)的文字并將矩形填色和邊框都設(shè)置為無。（這時你會發(fā)現(xiàn)當(dāng)鼠標(biāo)懸停在 B1 的文字上時，B1面板會被關(guān)閉。這是因為文字是矩形部件，當(dāng)鼠標(biāo)進(jìn)入到 B1 的文字上方是就相當(dāng)于移出 B1 面板中的 B1 矩形部件，就觸發(fā)了鼠標(biāo)移出事件，而這個事件就會關(guān)閉B1面板。）

所以我們必須去掉 B1面板 狀態(tài)1 中鼠標(biāo)移出事件，另外想辦法實現(xiàn) B1 面板的關(guān)閉。

五、設(shè)定響應(yīng)區(qū)域

辦法是在 A1 的兩個狀態(tài)中的矩形和B1狀態(tài)中的矩形周圍添加一圈響應(yīng)區(qū)域，這個區(qū)域的作用就是響應(yīng)鼠標(biāo)移出事件，但它們本身是透明的。所以我們用熱區(qū)部件來實現(xiàn)，利用它既可以添加事件，又透明的特性，并且它有顏色，你可以看見它有利于我們操作。

（1）在 B1 面板 狀態(tài)1 中的矩形上方，添加一個寬度與矩形相同，高度為5的 熱區(qū) 部件。添加一個鼠標(biāo)移入事件，兩個動作：①先隱藏B1面板；②再將A1面板的狀態(tài)恢復(fù)為常態(tài)。

（2）同樣我們在 B1 的右側(cè)、下方以同樣方式添加熱區(qū)，左側(cè)有點特殊，高度不能與矩形一致，要把與 A1 相交的地方空出來，這樣當(dāng)從交界處移出的時候不會關(guān)閉B1。

（3）在A1的兩個狀態(tài)下我們也要在它們的上、左、下方添加這樣的熱區(qū)，并設(shè)置相同的事件。

六、更多的動態(tài)面板

以相同的方式添加其他的A區(qū)域和B區(qū)域，例如新添加A2和B2，因為在A1和A2的邊界上面要有一些特殊處理。

（1）在頁面中復(fù)制一個 A1 ，命名為 A2 ，然后將 A1 面板的 常態(tài) 和 變換 狀態(tài)中的矩形下方的那個5像素的相應(yīng)區(qū)域的熱區(qū)刪除。因為 A2 會直接處于 A1 的下方，所以我們在 A2中 的矩形的鼠標(biāo)移入事件中去關(guān)閉 B1 就可以了。同時也需要刪除 A2 面板 常態(tài) 和 變換 狀態(tài)中矩形上方和下方的熱區(qū)。

（2）同樣復(fù)制一個B1，修改名稱為B2，先處理A2常態(tài)狀態(tài)中的矩形鼠標(biāo)移入事件①隱藏B1；②將A1狀態(tài)轉(zhuǎn)換成常態(tài)；③顯示B2；④設(shè)置A2狀態(tài)轉(zhuǎn)換成變換；⑤隱藏B3；⑥將A3狀態(tài)轉(zhuǎn)換成常態(tài)。

（3）處理A2變換狀態(tài)中的矩形鼠標(biāo)移入事件：顯示B2。

（4）把A2和B2中的所有熱區(qū)的鼠標(biāo)移入事件改為隱藏B2和修改A2的狀態(tài)。

（5）這時B1和B2會同時出現(xiàn)，同時在A1的事件中要關(guān)閉B2，A1中的事件也要修改。

（6）同理復(fù)制生成A3、B3……，根據(jù)加入動態(tài)面板按照之前的邏輯修改相應(yīng)的事件。

（新問題：如果鼠標(biāo)從A1進(jìn)入B1在從A1與A3相交的地方進(jìn)入A3，A1就不會關(guān)閉，這時候保險起見就把所有A系列面板常態(tài)狀態(tài)下的矩形鼠標(biāo)移入事件中添加一個關(guān)閉所有其他B系列面板并且將所有其他A系列面板的狀態(tài)設(shè)置為常態(tài)）

這是一個垂直的導(dǎo)航，大家感興趣也可以試試水平方向的。

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

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