二級選單的製作與使用（1）

2023年7月，正式開始了產品經理的新路歷程，初涉產品經理崗位，選單製作佔據了我不少時間去搞定，二級選單是常見的操作樣式，為避免緊急情況下不知如何操作，記錄如下：

效果如圖：

一、用到的元件

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的選單收縮。