在 Axure 中利用 Panel 做漂亮的 Menu

雖然蛙不負責視覺設計，但因為我太喜歡調整頁面樣式的過程了 (企劃中的重大消遣活動)，因此我不太喜歡用內建的元件做 Menu，萬一都設定好了之後突然想把原先設定的粉紅色改成綠色，底色反白什麼的，那真是太麻煩了，因此我一般做選單時，都是用 Panel 的元件自製類似效果，這樣子做的話在樣式的設定上就彈性多了~

手動以Panel製作的選單

自行以 Dynamic Panel 設定 Menu

用系統內建的 Rectangle 與 Dynamic Panel 來做選單

用系統內建的 Rectangle 與 Dynamic Panel 來做選單，Rectangle部分當作主選單 (當然也可以用Button Shape，隨你高興，效果幾乎一樣 )，Dynamic Panel則是等下要讓他飄啊飄的子選單部分。

雙擊 Panel 展開編輯畫面

編輯 Panel的第一個步驟就是命名，基本上這個步驟如果跳過功能上不會有什麼影響，但如果你畫面中有太多的 Panel 之後，等會兒要設定動作時你就找不到他了 XD

雙擊 Panel中的「子選單」文字，可以打開子選單的編輯頁面

動作偵測區域設定

沿著 Panel 的邊緣放一個跟 Panel 一樣大的 Rectangle 元件，設定成無邊框、底色透明，作為動作的偵測區域接著設定動作，OnMouseEnter、OnMouseOut的時候，隱藏這個會員中心子選單的 Panel。

接著再拉一個子選單的背景，樣式隨意，但至少要有底色，上方切齊上緣，另外3邊保留一定距離不要蓋到動作偵測區。

加上子選單的文字與超連結

最後加上子選單的文字與超連結，Panel 的部分就完成了。

主選單加上可以展開子選單的動作

Panel 的部分完成之後，需要在主選單的 Rectangle 元件加上動作，可以設定 OnClick 與 OnMouseEnter 時，顯示子選單的 Panel。

進入頁面時預設隱藏子選單

最後一個步驟則是利用下方的 Page Interaction 功能設定 OnPageLoad 時 Hide Panel，讓載入這個頁面時，隱藏子選單。

登~登~登~登~ 這樣子就完成囉~~~

自製 Menu 選單的優缺點

優點：

• 調整樣式方便
• 調整子選單項目方便

缺點：

• 在畫 Layout 時，因為這個主選單是用 Panel做的，無法自動隱藏，因此容易擋到底下的網頁標題，編輯頁面時可以先將 Header 移到邊邊，等編輯好了再拖回來
• 三層以上的選單不建議使用，會做到頭昏眼花
• 雖然設定沒錯，但有時候動畫會失靈 ( 不要問我為什麼 XD )

~ 最後來看看產生的效果吧 ~