Axure如何製作可伸縮的全域性導航?
可伸縮的全域性導航可以幫助使用者尋找到感興趣的類目，滑鼠在一級分類上懸停，一級分類下的二級和三級分類就會顯示出來，結束懸停時，二級和三級分類就會收縮起來。
話不多說，立馬開始分享：
首先，我們將導航分為兩個區域，A區域是正常情況下顯示出來的區域，B區域是滑鼠懸停以後顯示出來的區域。當滑鼠在A區域懸停的時候，A區域背景會變深，同時B區域的內容出現並且可以點選；當滑鼠從A和B的非共同邊界移出時，A區域顏色回到正常情況下的顏色，同時B區域隱藏。
一、新建A區域動態面板
（1）拖拽一個動態面板部件到頁面中，命名為 A1。
（2）將 A1 動態面板 state1 的名稱修改為 常態 ，在 常態 狀態中拖拽一個與A1面板相同大小的矩形部件（A1常態矩形），顏色自定義。
（3）為 A1 新建一個狀態為 變換，同在 變換 狀態中新增一個與A1面板相同大小矩形部件（A1變換矩形），顏色比A1常態矩形的顏色深一些。
二、新建B區域動態面板
（1）再拖拽一個動態面板部件到頁面中，命名為 B1（B1與A1右上角對齊）。
（2）B1 動態面板 state1 的名稱修改為 狀態1 ，在 狀態1 中拖拽一個與B1面板相同大小的矩形部件（B1矩形），顏色與 A1變換矩形相同。
（3）回到首頁中，右擊B1面板，將它設定為隱藏。
設定完效果如下：
三、給面板新增事件
（1）找到 A1 面板的 常態 狀態中的矩形部件，在這個矩形的 滑鼠懸停 事件中，做兩個動作：
- 將B區域的B1面板顯示出來；
- 將A1面板的狀態修改為深色背景的變換狀態。
（2）為 B1 面板的 狀態1 中的矩形部件新增一個滑鼠移出事件，做兩個動作：①先隱藏B1面板；②再將A1面板的狀態恢復為常態。
（3）為 A1 面板的 變換 狀態中的矩形部件新增一個滑鼠移入事件，做一個動作：將B1設定為可見。
四、新增文字
拖拽一個矩形部件到 A1 常態 狀態中，雙擊輸入相應文字並將矩形填色和邊框都設定為無。
右擊這個矩形，選擇互動樣式，在滑鼠懸停中勾選下劃線。
把矩形的外尺寸調整得跟矩形當中的文字外尺寸差不多，並且在 A1 的常態和變換狀態都放上這個矩形。
同理，在 B1 拖拽一個矩形部件到 狀態1 中，雙擊輸入相應的文字並將矩形填色和邊框都設定為無。（這時你會發現當滑鼠懸停在 B1 的文字上時，B1面板會被關閉。這是因為文字是矩形部件，當滑鼠進入到 B1 的文字上方是就相當於移出 B1 面板中的 B1 矩形部件，就觸發了滑鼠移出事件，而這個事件就會關閉B1面板。）
所以我們必須去掉 B1面板 狀態1 中滑鼠移出事件，另外想辦法實現 B1 面板的關閉。
五、設定響應區域
辦法是在 A1 的兩個狀態中的矩形和B1狀態中的矩形周圍新增一圈響應區域，這個區域的作用就是響應滑鼠移出事件，但它們本身是透明的。所以我們用熱區部件來實現，利用它既可以新增事件，又透明的特性，並且它有顏色，你可以看見它有利於我們操作。
（1）在 B1 面板 狀態1 中的矩形上方，新增一個寬度與矩形相同，高度為5的 熱區 部件。新增一個滑鼠移入事件，兩個動作：①先隱藏B1面板；②再將A1面板的狀態恢復為常態。
（2）同樣我們在 B1 的右側、下方以同樣方式新增熱區，左側有點特殊，高度不能與矩形一致，要把與 A1 相交的地方空出來，這樣當從交界處移出的時候不會關閉B1。
（3）在A1的兩個狀態下我們也要在它們的上、左、下方新增這樣的熱區，並設定相同的事件。
六、更多的動態面板
以相同的方式新增其他的A區域和B區域，例如新新增A2和B2，因為在A1和A2的邊界上面要有一些特殊處理。
（1）在頁面中複製一個 A1 ，命名為 A2 ，然後將 A1 面板的 常態 和 變換 狀態中的矩形下方的那個5畫素的相應區域的熱區刪除。因為 A2 會直接處於 A1 的下方，所以我們在 A2中 的矩形的滑鼠移入事件中去關閉 B1 就可以了。同時也需要刪除 A2 面板 常態 和 變換 狀態中矩形上方和下方的熱區。
（2）同樣複製一個B1，修改名稱為B2，先處理A2常態狀態中的矩形滑鼠移入事件①隱藏B1；②將A1狀態轉換成常態；③顯示B2；④設定A2狀態轉換成變換；⑤隱藏B3；⑥將A3狀態轉換成常態。
（3）處理A2變換狀態中的矩形滑鼠移入事件：顯示B2。
（4）把A2和B2中的所有熱區的滑鼠移入事件改為隱藏B2和修改A2的狀態。
（5）這時B1和B2會同時出現，同時在A1的事件中要關閉B2，A1中的事件也要修改。
（6）同理複製生成A3、B3……，根據加入動態面板按照之前的邏輯修改相應的事件。
（新問題：如果滑鼠從A1進入B1在從A1與A3相交的地方進入A3，A1就不會關閉，這時候保險起見就把所有A系列面板常態狀態下的矩形滑鼠移入事件中新增一個關閉所有其他B系列面板並且將所有其他A系列面板的狀態設定為常態）
這是一個垂直的導航，大家感興趣也可以試試水平方向的。
本文由 @Delia 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議