最近學習了一下網頁原型製作。仿照紀梵希官網做的網頁原型，其中導航欄涉及邏輯較複雜，打卡記錄一下。

首先，分析官網導航欄動效的需求：

1.滑鼠點選導航選項卡，跳轉至對應的導航頁面。

2.滑鼠移入導航選項卡時，出現對應的下拉選單，選項卡下方顯示選中狀態。

3.滑鼠向上移出選項卡時，下拉選單消失，選中狀態消失。

4.滑鼠向下移入下拉選單時，下拉選單、選中狀態依然顯示。

5.滑鼠移出下拉選單，下拉選單、選中狀態消失。

6.滑鼠點選下拉選單內的子連結，跳轉至對應的子頁面。

紀梵希官網

1.總動態面板

1).設定一個動態面板——總導航，導航欄部分和幾個下拉選單部分全設定這個面板區域內。

2).雙擊state1進行面板內容編輯。導航選項卡在一個矩形區域內，文字和選中狀態的編輯。其中選中狀態設定為隱藏。

（藍色線是標尺）

2.設定下拉選單

1).每個下拉選單就是一個動態面板。在頁面中，“總導航”內拖動一個動態面板，同樣雙擊state1進入動態面板進行文字圖片的編輯。

2).四個下拉選單同樣的設定。並且所有的選單動態面板都緊貼在導航欄下方。然後所有的下拉選單都設定為“隱藏”。

3.動效需求1：滑鼠點選導航選項卡，跳轉至對應的導航頁面。

在選項卡動態面板內，選中需要點選跳轉的選項，在右側撿視區，設定元件的鼠標單擊事件

4.動效需求2：滑鼠移入導航選項卡時，出現對應的下拉選單，選項卡下方顯示選中狀態。

在選項卡動態面板內，選中需要點選跳轉的選項，在右側撿視區，設定元件的滑鼠移入事件——顯示對應下拉選單同時隱藏其他下拉選單——顯示“選中狀態”黑色小矩形。

5.動效需求3：滑鼠向上移出選項卡時，下拉選單消失，選中狀態消失。

滑鼠移出選項區域，下拉選單和選中狀態消失，此時需要設定熱區了，熱區可以控制沒有其他元件的區域觸發某些事件。

拖動熱區到如下紅框區域，滑鼠移入這些區域，都可以觸發下拉選單、選中狀態隱藏。

分別設定這些熱區的滑鼠移入事件

6.動效需求4：滑鼠向下移入下拉選單時，下拉選單、選中狀態依然顯示。

滑鼠下移出選項區域，下拉選單、選中狀態不改變，很簡單，剛才已經設定了熱區的隱藏事件（即向上和雙側區域），所以此時不需做任何選項移出事件即可。（這個彎我繞了很久。。。）

7.動效需求5：滑鼠移出下拉選單，下拉選單、選中狀態消失。

在每個下拉選單動態面板下設定滑鼠移出事件——隱藏該下拉選單、該選中狀態。

8.動效需求6：滑鼠點選下拉選單內的子連結，跳轉至對應的子頁面。

在下拉選單的動態面板內，選中需要點選跳轉的選項，在右側撿視區，設定元件的鼠標單擊事件——開啟連結——目標URL。

通需求1.

注意：元件的命名。方便在設定事件時，快速找到需要設定的物件。