編輯導語：二級菜單是常見的操作樣式，為避免緊急情況下不知如何操作，也許你需要了解一下二級菜單的制作過程。那么，如何利用Axure來制作二級菜單？本篇文章里，作者便結合Axure梳理了一份二級菜單Axure制作和使用教程，一起來看一下。

前段時間跟甲方領導一塊去開會，當時主要是因為有個項目比較著急，需要現場修改原型，修改過程中需要用到三級折疊菜單，當時怎么也整不出來，最后把二級菜單的樣式修改了一下，雖然蒙混過關，但是真的覺得特別尷尬。

會議結束后，我就緊急研究了一下怎樣用更加簡單的方式實現三級折疊菜單的制作與使用，過程中我們先將二級菜單的制作過程展示出來。

話不多說，先上效果圖（看著有些單調，如果想要其他效果，歡迎催更~）。

接下來，我們說一下制作方法。

一、用到的元件

Axure 9.0元件庫中的矩形、阿里巴巴矢量圖標庫中搜索的一級菜單圖標及向下箭頭。

二、一級菜單制作

使用鼠標將Axure9.0自帶元件庫中的矩形拖拽至頁面固定位置，【“樣式”頁面/工具欄】設置矩形大小、邊框、填充顏色。

【“樣式”頁面/工具欄】設置菜單名稱的字體大小、顏色，【功能區->樣式】設置內容與矩形的邊距。

選中矩形，點擊鼠標右鍵，選擇【交互樣式】，設置菜單名稱鼠標懸停樣式中的字色，點擊【確定】。

將從【阿里巴巴矢量圖標庫】中搜索的一級菜單圖標調整好顏色和大小，放在菜單名稱前面合適的位置，將向下箭頭圖標放在菜單名稱的后面，表示折疊效果。

選擇矩形、圖標、向下箭頭，點擊【中部】按鈕，調整樣式至中部對齊。

一級菜單制作完成。

三、二級菜單制作

同時選中一級菜單圖標、矩形、向下箭頭，點擊【工具欄】中的【組合】按鈕，同時，選擇【交互->出發內部元件鼠標交互樣式】。

完成組件之間的組合后，單擊鼠標右鍵選擇【轉換為動態面板】，命名為“一級菜單1”。

雙擊“一級菜單1”動態面板，此時一級菜單轉化為動態面板中的state1，點擊后面的復制狀態按鈕新增state2。

打開state2頁面，修改state2頁面一級菜單樣式，選擇向下箭頭，調整向下箭頭【位置與尺寸】，旋轉180°，箭頭向上顯示為菜單展開效果。

鼠標選中一級菜單樣式，同時按住鍵盤中的【Ctrl】鍵，將一級菜單樣式復制一份到該樣式下方，調整至左右對齊，刪除圖標及向下箭頭（或根據需求自行調整樣式），修改菜單字樣為“二級菜單1.1”。

點擊鼠標右鍵選擇【交互樣式】（注意：此時如果樣式為組合狀態，請取消組合，否則否見不顯示交互樣式按鈕），設置菜單懸停和選中效果，懸停效果可設置填充顏色、字色，選中效果可包括填充顏色、字色、線段顏色、邊框寬度、邊框類型、邊框可見性等樣式，點擊【確定】，完成二級菜單樣式調整。

選擇二級菜單，在“交互”頁面依次執行以下操作：【新建交互->單擊時->設置選中】，選擇設置當前元件為“真”，點擊確定。

交互編輯器窗口關閉后，按住鍵盤中的【Ctrl】鍵，復制出所需的二級菜單個數，調整位置并修改成所需的菜單名稱，完成二級菜單樣式的制作。

四、設置菜單展開與折疊效果

切換至state1，選中一級菜單樣式，在 “交互”頁面依次執行以下操作：【新建交互->單擊時->設置面板狀態】，選擇設置“一級菜單1到state2 推動和拉動元件 下方”。

切換至state2，選中一級菜單樣式，在“交互”頁面依次執行上述相同操作：【新建交互->單擊時->設置面板狀態】，選擇設置“一級菜單1到state1 推動和拉動元件 下方”。

此時，我們查看菜單制作效果，可以發現：點擊不同的二級菜單會出現以下情況。

此時，我們可以選擇三項二級菜單，點擊鼠標右鍵，選擇【選項組】，選擇已有的組名稱或輸入新的組名稱，現在，我們填寫組名稱為“二級菜單-互斥”，點擊【確定】按鈕，完成編輯操作。

此時點擊預覽，我們可以看到點擊不同的二級菜單，不會出現全部選中的效果。

五、設置菜單互斥效果

關閉動態面板，選擇首頁面“一級菜單1”動態面板，按住鍵盤中的【Ctrl】鍵，復制出所需的一級菜單個數，并依次修改菜單名稱和對應動態面板名稱為一級菜單2、一級菜單3。

雙擊“一級菜單1”動態面板，在state1頁面選擇“一級菜單1”樣式，鼠標移入到設置面板狀態處，點擊【添加目標】按鈕繼續設置面板狀態，分別為“一級菜單2到state1 推動和拉動元件 下方”、“一級菜單3到state1 推動和拉動元件 下方”。

以上操作實現的效果為：展開一級菜單1，則一級菜單2、一級菜單3的菜單收縮。

“一級菜單2”動態面板中state1的操作方式同上，設置面板狀態分別為“一級菜單1到state1 推動和拉動元件 下方”、“一級菜單3到state1 推動和拉動元件 下方”。

以上操作實現的效果為：展開一級菜單2，則一級菜單1、一級菜單3的菜單收縮。

“一級菜單3”動態面板中state1的操作方式同上，設置面板狀態分別為“一級菜單1到state1 推動和拉動元件 下方”、“一級菜單2到state1 推動和拉動元件 下方”。

以上操作實現的效果為：展開一級菜單3，則一級菜單1、一級菜單2的菜單收縮。

二級菜單效果制作完成，查看效果。

二級菜單的效果制作完成了，有什么問題歡迎大家在評論區留言，下篇給大家更新《三級菜單的制作和使用》。

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

題圖來自 Unsplash，基于 CC0 協議