中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

首先，我們將導航分為兩個區域，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協議