設計多層選單

1. 認識選單物件 (Menu Widget)
2. 編輯選單物件
3. 設定選單的變換樣式 (Rollover Style)
4. 秘技 (Quick Tips)

---

1. 認識選單物件 (Menu Widget)

選單物件 (Menu widgets) 常被用來建立簡單的多層選單 (Flyout Menus)。您可以在Widgets窗格中找到兩種選單物件：

• Menu (Vertical) - 垂直選單
• Menu (Horizontal) - 水平選單

將你所需要的選單物件從Widgets窗格中拖曳到Wireframe就可輕鬆建立，新的選單會先設置3個選單選項(Menu Item)。

下圖展示的動畫則是已經完成設定的多層選單：

---

2. 編輯選單物件

編輯選單和選單項目的文字與格式的方法就像編輯其他Widget一樣，您可以在選單項目上連續按滑鼠左鍵兩下編輯文字，也可以利用工具列來編輯選單和選單項目的色彩、字型和其他樣式。

選單物件的編輯功能有這些項目：

• Edit Menu Padding - 選項間距設定
• Edit Rollover Style - 設定變換樣式
• Add Menu Item After - 往後新增選項
• Add Menu Item Before - 往前新增選項
• Delete Menu Item - 刪除選項
• Add Submenu - 新增子選單 (如果已經有子選單，則會顯示 Delete Submenu - 刪除子選單)

在 Menu Widget的選項上，按滑鼠右鍵會出現如下圖功能選單：

增加或移除選單項及子選單

想要增加或移除選單項目的話，請在選單項目上按滑鼠右鍵，選擇「Add Menu Item」和「Delete Menu Item」指令。

想要在選單項目下加入子選單的話，請在選單項目上按滑鼠右鍵，選擇「Add Submenu」。在Axure RP的畫布區域，通常Submenu會自動縮回，要去點一下上層選單，才能再看到前新增的Submenu。如下動畫：

　

設定選項間距(Padding)

若是想要編輯選單項目之間的間距(Padding)，請在選單或選單項目上按滑鼠右鍵，選擇「Edit Menu Padding」。

　

---

3. 設定選單的變換樣式 (Rollover Style)

就像Button Shape Widget一樣，變換樣式(Rollover Style)也可套用在Menu Widget的選單項目上。

想要編輯選單的變換樣式，請在選單或選單項目上按滑鼠右鍵，選擇「Edit Rollover Style」，此時會開啟「Set Rollover Style」對話方塊，您可以在這裡選擇單一選單項目、選單上的所有選單項目，或是選單和子選單上的所有選單項目的變換樣式。

勾選「Preview」核取方塊來預覽套用在選單上的變換樣式。

套用了變換樣式之後，您可以在Wireframe中，利用滑鼠滑過選單項目左上角的黑白色方塊來預覽變換樣式。

---

4. 秘技 (Quick Tips)

秘技 1. 優先設定母選單(Root Menu)的樣式：

當子選單(Submenu)建立了以後，會自動套用母選單(Root Menu)的樣式，您可以在建立子選單之前先將母選單樣式設好，以節省時間。

---

(版權聲明：歡迎引用及複製Axure RP 中文教學內容，必須註明出處為悠識數位顧問有限公司及原始文章網址 UserXper.com)

---