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

本文是關于在Axure8.0中，如何去仿制“人人都是PM”首頁導航，一起來看看~

原效果圖：

我的電腦屏幕分辯率是1366*768，所以在這里取可視區為1345，故拖入矩形設置寬為1345，截屏測量得到“人人都是PM”一級導航的高為60，故矩形的高設置為60。 然后給導航背景條添加陰影X為1，y為2，再根據測量的LOGO位置將下載的LOGO放入到導航，同理添加導航前三項文字，以及“分類瀏覽”右側的圖標（在這里我使用的是圖片）

導航設計.png

由效果圖知道，當鼠標移入導航的文字時會下方出現藍色的線條，在這里實現的方法是對矩形下邊框進行顯示隱藏。

設置初始狀態下邊框為四邊不可見：

導航樣式.png

設置交互樣式：

交互樣式.png

首頁一級導航的要點在于：鼠標移入導航項可以顯示子菜單，且鼠標可以移入子菜單，移出子菜單和導航項時則隱藏子菜單，這里以第二項“分類瀏覽”為例。

設計子菜單，并轉換為動態面板。

為了實現移出子菜單時隱藏子菜單的效果，所以在子菜單的動態面板下放置一個熱區，熱區的上邊距和子菜單一定要保持一致且寬高要大于子菜單（該熱區是為了設置鼠標從子菜單移入熱區時能隱藏子菜單），再設置面板和熱區在默認情況下為隱藏狀態

子菜單.png

設置分類瀏覽的的鼠標移入事件，在鼠標移入時將“分類瀏覽”右側的圖標設置為打開狀態的圖片，且設置子菜單和熱區為顯示狀態。

改變列表圖標.png

顯示面板.png

最后就是設置鼠標移出子菜單和導航項時隱藏子菜單的效果。因為有下面兩種狀態，所以不能直接在導航項設置移出隱藏子菜單的動作，在這里采用的辦法是給導航項下面加一個矩形（或熱區），類似于上述“子菜單”下的熱區，下邊距和“導航項”必須保持一致，且寬度和高度比導航項大。（為了讓鼠標移入該矩形或熱區時才隱藏子菜單，而不影響鼠標移入子菜單時面板的狀態）

• 情況一：鼠標移出導航項進入子菜單，此時鼠標移出導航項子菜單是顯示狀態；
• 情況二：鼠標移出導航項不進入子菜單，此時鼠標移出導航項子菜單是隱藏狀態。

綜上，需要讓鼠標移入子菜單仍然保持顯示狀態則設置的動作如下:

• 在情況一時，鼠標移入子菜單下的矩形或熱區才隱藏子菜單；
• 在情況二時，鼠標移入導航項下的熱區才隱藏子菜單。

子菜單面板隱藏.png

最后考慮到鼠標可能移出的方向有以下幾個，所以除了上述兩個隱藏事件，還需要給導航左右兩項設置移入時隱藏子菜單的動作。

隱藏效果分析.png

補充.png

套用上述的方法就可以實現一級導航的效果了，其中還添加了“測試”按鈕，用于測試登錄狀態下導航的顯示效果（注冊、登錄按鈕隱藏，顯示消息和頭像），這部分其實就是動態面板的狀態改變。

另外二級導航的效果也比較簡單，類比上述交互樣式的鼠標懸停以及“鼠標移入”時控制邊框顯示隱藏就可實現二級導航的效果，最終效果如圖：

未登錄狀態下，鼠標移入一級導航下的子菜單：

一級導航未登錄狀態效果.png

登錄狀態下，鼠標懸停在二級導航：

二級導航登錄狀態效果.png

總結：

本文由 @Sanny 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議