利用 Axure 內建元件做方便的 Menu

做網站的 Prototype 時，一定會出現的元素就是主選單，如果只有幾個頁面，主選單只有一層的話，那非常簡單沒有問題，就用按鈕或是文字加上超連結就行了，但如果 Menu 有兩層，或者更多的話，就感覺有點麻煩了...

Axure 內建的 Menu 元件可以調整成這樣

如何利用 Axure 內建的元件做選單

Axure 預設的 Menu 元件有兩種

Classic Menu - Horizontal 的效果

Axure基本上有2組預設的Menu元件，可以輕易地在Menu下新增子選單。

點選元件的位置，右側可新增同級選單與子選單

先將元件拖曳至頁面中央，右側 Widget Properties and style 區域會出現 Menu 獨有的功能，可以新增同級的選單或子選單。

Menu 的右鍵選單

在 Menu 中，點選右鍵時所出現的選單中，也有相同的功能。

另外比較麻煩的一點是，Widget Properties and style 中的刪除單一項目的功能，在刪除子選單時，沒有辦法全部刪除，至少得留下一個，如果要刪除子選單中全部的項目時，必須要往上一層，利用右鍵選單中的 "Delete Submenu" 功能才能全部刪除。

調整元件的外觀

調整樣式後

選單的文字完成了之後，Menu 的原件可以調整顯示的樣式，但可調整的範圍沒有其他元件廣，沒辦法調成頁籤的形狀、或是產生圓角的效果，只有文字顏色、邊框顏色、底色、長、寬等元素能調整。

另外比較麻煩的問題是，Menu的樣式調整的方式真的不太友善，並不是設定一次所有子選單的樣式都能套用，舉例來說，如果我的 Menu 有1、2、3等3個選項，各自都有1個子選單，那麼我總共需要調整4次樣式，主選單1次，3個子選單各一次，最糟糕的是，如果你想要調整子選單的高度，就....得要 一  個  一  個  調，假如說你3個子選單，每個選單各有3個項目的話，那麼就得要調 3*3=9 次！ (崩潰)

基於以上原因，其實我完全沒有用過這個預設的Menu功能...  (那剛剛講這麼多是做什麼 XD)

但是他真的很方便啦，不騙你，主要選用這個元件的原因：

1. 不用設定動態效果，不必測試效果因為也不會出錯
2. 效果100%成功展現
   (用其他的方式設定，雖然設定方式正確，但都會有一定機率某些效果沒有展現)
3. 在編輯中會自動收合，不擋路

尤其是你的選單超過三層的時候，用其他方式就不太容易做了，建議碰上這種情況的話，還是用內建的Menu元件來處理吧~

~點這裡看看效果~