-
我的電腦屏幕分辯率是1366*768，所以在這里取可視區(qū)為1345，故拖入矩形設(shè)置寬為1345，截屏測量得到“人人都是PM”一級導(dǎo)航的高為60，故矩形的高設(shè)置為60。 然后給導(dǎo)航背景條添加陰影X為1，y為2，再根據(jù)測量的LOGO位置將下載的LOGO放入到導(dǎo)航，同理添加導(dǎo)航前三項(xiàng)文字，以及“分類瀏覽”右側(cè)的圖標(biāo)（在這里我使用的是圖片）
導(dǎo)航設(shè)計(jì).png
- 由效果圖知道，當(dāng)鼠標(biāo)移入導(dǎo)航的文字時會下方出現(xiàn)藍(lán)色的線條，在這里實(shí)現(xiàn)的方法是對矩形下邊框進(jìn)行顯示隱藏
- 設(shè)置初始狀態(tài)下邊框?yàn)樗倪叢豢梢?/li>
- 設(shè)置交互樣式
3.首頁一級導(dǎo)航的要點(diǎn)在于：鼠標(biāo)移入導(dǎo)航項(xiàng)可以顯示子菜單，且鼠標(biāo)可以移入子菜單，移出子菜單和導(dǎo)航項(xiàng)時則隱藏子菜單，這里以第二項(xiàng)“分類瀏覽”為例
設(shè)計(jì)子菜單，并轉(zhuǎn)換為動態(tài)面板
為了實(shí)現(xiàn)移出子菜單時隱藏子菜單的效果，所以在子菜單的動態(tài)面板下放置一個熱區(qū)，熱區(qū)的上邊距和子菜單一定要保持一致且寬高要大于子菜單（該熱區(qū)是為了設(shè)置鼠標(biāo)從子菜單移入熱區(qū)時能隱藏子菜單），再設(shè)置面板和熱區(qū)在默認(rèn)情況下為隱藏狀態(tài)
-
設(shè)置分類瀏覽的的鼠標(biāo)移入事件，在鼠標(biāo)移入時將“分類瀏覽”右側(cè)的圖標(biāo)設(shè)置為打開狀態(tài)的圖片，且設(shè)置子菜單和熱區(qū)為顯示狀態(tài)
改變列表圖標(biāo).png
- 最后就是設(shè)置鼠標(biāo)移出子菜單和導(dǎo)航項(xiàng)時隱藏子菜單的效果。因?yàn)橛邢旅鎯煞N狀態(tài)，所以不能直接在導(dǎo)航項(xiàng)設(shè)置移出隱藏子菜單的動作，在這里采用的辦法是給導(dǎo)航項(xiàng)下面加一個矩形（或熱區(qū)），類似于上述“子菜單”下的熱區(qū)，下邊距和“導(dǎo)航項(xiàng)”必須保持一致，且寬度和高度比導(dǎo)航項(xiàng)大（為了讓鼠標(biāo)移入該矩形或熱區(qū)時才隱藏子菜單，而不影響鼠標(biāo)移入子菜單時面板的狀態(tài)）
???? * 情況一：鼠標(biāo)移出導(dǎo)航項(xiàng)進(jìn)入子菜單，此時鼠標(biāo)移出導(dǎo)航項(xiàng)子菜單是顯示狀態(tài)
???? * 情況二：鼠標(biāo)移出導(dǎo)航項(xiàng)不進(jìn)入子菜單，此時鼠標(biāo)移出導(dǎo)航項(xiàng)子菜單是隱藏狀態(tài)
綜上，需要讓鼠標(biāo)移入子菜單仍然保持顯示狀態(tài)則設(shè)置的動作如下
????【1】在情況一時，鼠標(biāo)移入子菜單下的矩形或熱區(qū)才隱藏子菜單
????【2】在情況二時，鼠標(biāo)移入導(dǎo)航項(xiàng)下的熱區(qū)才隱藏子菜單
最后考慮到鼠標(biāo)可能移出的方向有以下幾個，所以除了上述兩個隱藏事件，還需要給導(dǎo)航左右兩項(xiàng)設(shè)置移入時隱藏子菜單的動作
套用上述的方法就可以實(shí)現(xiàn)一級導(dǎo)航的效果了，其中還添加了“測試”按鈕，用于測試登錄狀態(tài)下導(dǎo)航的顯示效果（注冊、登錄按鈕隱藏，顯示消息和頭像），這部分其實(shí)就是動態(tài)面板的狀態(tài)改變。
另外二級導(dǎo)航的效果也比較簡單，類比上述交互樣式的鼠標(biāo)懸停以及“鼠標(biāo)移入”時控制邊框顯示隱藏就可實(shí)現(xiàn)二級導(dǎo)航的效果，最終效果如圖：
- 未登錄狀態(tài)下，鼠標(biāo)移入一級導(dǎo)航下的子菜單
-
登錄狀態(tài)下，鼠標(biāo)懸停在二級導(dǎo)航
二級導(dǎo)航登錄狀態(tài)效果.png
總結(jié)：
